Join egghead, unlock knowledge.

Want more egghead?

This lesson is for members. Join us? Get access to all 3,000+ tutorials + a community with expert developers around the world.

Unlock This Lesson
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

    Joe PreviteJoe Previte
    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 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
    Transcript

    Transcript

    Instructor: 00:01 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.

    00:20 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.

    00:31 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.

    00:52 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.

    Discuss

    Discuss