Search⌘ K
AI Features
Home
Courses
Building Web Applications with React and ASP.NET Core

Styling Pseudo-Classes and Nested Elements with Emotion

Explore how to apply styles to React components using Emotion by targeting pseudo-classes and nested elements. Learn to enhance UI elements such as headers, search boxes, and icons with focused styling techniques that improve usability and visuals. This lesson guides you through practical examples to help you effectively manage component styles in modern React applications.

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:

NAME_
CSS
<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:

NAME_
CSS
<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 ...