Learn how to style [Gatsby](https://www.gatsbyjs.org/) sites with CSS in JS library [styled-components](https://www.styled-components.com/). You’ll learn how to setup styled-components with Gatsby using [gatsby-plugin-styled-components](https://www.gatsbyjs.org/packages/gatsby-plugin-styled-components/), and we’ll refactor the header component from the default Gatsby started to styled-components.

This lesson is compatible with Gatsby v1 and v2.

https://app.egghead.io/api/v1/lessons/gatsby-style-gatsby-sites-with-styled-components/subtitles

Style Gatsby sites with styled-components

Instructor: [00:00] First install Gatsby plugin for styled components and its peer dependencies, styled-components and Babel plugin for styled components. Then add the plugin to your Gatsby config file, gatsby-config.js.

[00:12] Run Gatsby. Now, let's compare the header component from the default Gatsby standard to styled components. Input styled components, convert the container component. Replace the div with our new component. Convert the inner wrapper.

[00:48] Replace another div. Now, heading. Place h1 tag. The last one, the link. We should base it on the link component from Gatsby. Replace the original link with our new component, and now, if we have a look at our heading in the browser dev tools, we will see that all inline styles are now replaced with styled component class names.

[01:43] If we build our site with Gatsby build now, we will see that all our styles are now inline in the HTML file.

Style Gatsby sites with styled-components

Share this video with your friends