Roger Ramos grayscale profile photo with a nice smile and hat
rogerramos.me

Styled Components broke css with Gatsby

After add `styled-components` to my website, I've faced this problem:

Broken css with styled-components

The first access always broke the css :(

The solution

While use `styled-components` you need to install a plugin called gatsby-plugin-styled-components because Gatsby need to compile the css into build.

Bash:

npm install --save gatsby-plugin-styled-components styled-components babel-plugin-styled-components

gatsby-config.js

module.exports = {
  plugins: [
    {
      resolve: `gatsby-plugin-styled-components`,
      options: {
        // Add any options here if you want
      }
    }
  ]
};

Happy codding ;)

javascriptstyled-componentsgatsby
Go back