Style an HTML Element with Styled Component

Style a React Component with Styled Components



Creating Global Styles with Styled Components

Adjust Style based on props with Styled Components

Animate Styled Components in React

Create and use a Theme in Styled Components

Style pseudo-selectors and classes in Styled Components

Using the `css` prop to define styles in Styled Components

Using the `as` prop to reassign the HTML tag

Use the `attrs` method to add HTML attributes in styled-components

Use Styled Components with the Object syntax

Style a component based on complex props with Styled Components

Styling React Applications with Styled Components

We will use the `styled-components` library to go over how to style pseudo-selectors and classes.

The pseudo-selectors, such as `hover` and `before`, work the exact same as regular CSS. In our `element` or `class` styling backticks, we can set them like `:hover{}` and `:before{}` to change what the element or component does.

https://app.egghead.io/api/v1/lessons/react-style-pseudo-selectors-and-classes-in-styled-components/subtitles

Sara Vieira: [0:00] I have this button, which doesn't do anything. It also doesn't have a hover state, which is quite annoying. We want to let people know that they can actually use this button.

[0:11] How do you do this in styled components? Sometimes, there is a bit of hard work when it comes to adding hover and pseudo-elements, as well in CSS and JS libraries. In styled components, it works exactly the same way as you would do it in CSS.

[0:24] If I want to add a hover state, I can just come here and say, "Hover, open and close parentheses." If I say that I want to switch these two -- let me copy this over here. Let me say background, and this one is supposed to be the color now, if that's how you type color. There we go. Supposed to be the color.

[0:42] Now, if I hover over it, you can see that the color in the background have completely changed. Let's just add a transition -- all 200 milliseconds ease. Now, you can see that we have an animation for hover. The same thing works with before, so if I say before. I think I have an extra one, let me just remove it.

[1:04] If I say content equals and let me add an emoji. Now, you can see my most used emojis. It equals this, you can see that now, we have this as before. This is how you can style pseudo-elements and pseudo-classes using styled components.

Style pseudo-selectors and classes in Styled Components

Share this video with your friends

Course

Styling React Applications with Styled Components