Style Gatsby sites with styled-components
Learn how to style Gatsby sites with CSS in JS library styled-components. You’ll learn how to setup styled-components with Gatsby using 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.
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.