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.
Member comments are a way for members to communicate, interact, and ask questions about a lesson.
The instructor or someone from the community might respond to your question Here are a few basic guidelines to commenting on egghead.io
Be on-Topic
Comments are for discussing a lesson. If you're having a general issue with the website functionality, please contact us at support@egghead.io.
Avoid meta-discussion
Code Problems?
Should be accompanied by code! Codesandbox or Stackblitz provide a way to share code and discuss it in context
Details and Context
Vague question? Vague answer. Any details and context you can provide will lure more interesting answers!