Styling pseudo-classes and nested elements with Emotion
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:
- In
Header.tsx
, implement the following styles on the anchor tag:<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.
- Let's move on and style the search box:
<input   type="text"   placeholder="Search..."   onChange={handleSearchInputChange}   css={css`     box-sizing: border-box;     font-family: ${fontFamily};     font-size: ${fontSize...