Style a React component with styled-components

Style the body element with styled-components and "injectGlobal"

Theme your application with styled-components and "ThemeProvider"

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

Animate your user interface in React with styled-components and "keyframes"

Styled Components

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.

Course

Styled Components

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

Share this video with your friends