Styled Components
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.
[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.