Become a member
to unlock all features

Level Up!

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


    Create component variations in React with styled-components and "extend"


    In this lesson, we extend the styles of a base button component to create multiple variations of buttons, using "extend". We can then modify the base styles in one place, and have all button types updated.



    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




    We have a react app with style components and we're generating a few theme colors via the theme provider. We're currently outputting three buttons styled with the CSS provided here. They're all using the base color. We could use properties, like danger, to condition it change the background color here, but we can also extend the components styles.

    Let's create a button danger constant, button.extend. This new component inherits all the styles from the main button, and we can now set the background color to props.theme.danger. Let's update our button here to become a button danger component, and we can see the new background color applied.

    We'll copy that and also create a button gradient which will take the props.theme.gradient background color. Again, update the components to button gradient and we're good. We can now update the base button styles and the changes will carry over to all our buttons. Let's make the font weight 700 and add a border button, and here we go.