Autoplay

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

    Simon VrachliotisSimon Vrachliotis

    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.

    reactReact
    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

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

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

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

    Discuss

    Discuss