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

    Extend styles with styled-components in React

    reactReact

    In this lesson, you will learn how to extend styles from one styled-component to another in a React app. This is helpful when you have two styled-components that are similar but differ in one or more CSs properties.

    Code

    Code

    Become a Member to view code

    You must be a Pro 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
    orLog In
    Discuss

    Discuss

    Transcript

    Transcript

    Instructor: In this example, we will be working with two styled-components that we have to find in our .styles JS file. The first one you'll see is a button which we have over here in orange. The second is our help button which we have over here in red.

    You'll notice that they share a lot of the same CSS. What we can do to refactor this is extend the styles from our button onto our help button.

    To do that, we're going to use this special syntax from styled-components where we use styled as a function and then passing our base component, in this case, the button. Then what we can do is remove the CSS that they have in common.

    Our help button is created by extending the styles from our button styled-component and then modifying a few things like the background color and margin and adding position bottom and right.