Autoplay

    Style Gatsby sites with styled-components

    Artem SapeginArtem Sapegin

    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.

    gatsbyGatsby
    cssCSS
    Code

    Code

    Become a Member to view code

    You must be a Member to view code

    Access all courses and lessons, track your progress, gain confidence and expertise.

    Become a Member
    and unlock code for this lesson
    Transcript

    Transcript

    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.

    Discuss

    Discuss