Roger Ramos grayscale profile photo with a nice smile and hat

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.


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


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

Happy codding ;)

Go back