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 styled-components lesson, we set a "primary color" within a UI "theme" object. We make this theme accessible to all components by wrapping our application inside a <ThemeProvider>.

https://app.egghead.io/api/v1/lessons/react-theme-your-application-with-styled-components-and-themeprovider/subtitles

[00:00] We are importing three react components styled with style components. Notice that these components share the same UI color, currently hard-coded in each components. Let's improve that, and use style components theme provider. We'll import theme provider from style components alongside our existing inject global here.

[00:20] Let's define a theme object, and we'll have a primary property where we'll setup brand color. To make these theme properties available everywhere, we'll rap our root component inside the theme provider. Now, we can pass our theme object in a theme property, so we can access it in children style components.

[00:39] Let's update the quote component. Instead of the hard-coded X value, we'll reach out for the theme in props.theme, which is this theme property here, which return this object, and will return the primary color. Let's copy that and update the other instance of the color. We can also update our notice component and our button.

[01:05] Great. We now have all our components pulling the brand color from the same one place in our theme object. Let's change the value of the primary color to something else, and viola everything updates accordingly.

Theme your application with styled-components and "ThemeProvider"

Share this video with your friends

Course

Styled Components