Building Web Applications with React and ASP.NET Core/

...

/

Styling Pseudo-Classes and Nested Elements with Emotion

Styling Pseudo-Classes and Nested Elements with Emotion

Learn how to style the web page and how to add nested elements with Emotion.

We'll cover the following...

In this section, we will learn how to style pseudo-classes with Emotion. We will then move on to learn how to style nested elements:

  1. In Header.tsx, implement the following styles on the anchor tag:

Press + to interact
<a 
  href="./" 
  css={css`
    font-size: 24px;
    font-weight: bold;
    color: ${gray1};
    text-decoration: none;
`}
>
Q& A
</a>

Here, we are making the app name fairly big, bold, and dark gray, and also removing the underline.

  1. Let’s move on and style the search box:

Press + to interact
<input
type="text" 
placeholder="Search..." 
onChange={handleSearchInputChange} 
    css={css`
    box-sizing: border-box;
    font-family: ${fontFamily};
    font-size: ${fontSize};
    padding: 8px 10px;
    border: 1px solid ${gray5};
    border-radius: 3px;
    color: ${gray2};
    background-color: white;
    width: 200px;
    height: 30px;
  `}
/>

Here, we are using the standard font family and size ...