1×
Become a member
to unlock all features

Level Up!

Access all courses & lessons on egghead today and lock-in your price for life.

Autoplay

    Style pseudo-selectors and classes in Styled Components

    Sara VieiraSara Vieira
    reactReact

    In this lesson, we will use the styled-components library to go over how to style pseudo-selectors and classes.

    We will do this by styling the hover and before of a button.

    Code

    Code

    Become a Member to view code

    You must be a Member to view code

    Access all courses and lessons, track your progress, gain confidence and expertise.

    Become a Member
    and unlock code for this lesson
    Discuss

    Discuss

    Transcript

    Transcript

    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.