Deep Dive

“The fastest auto dealership site in the world” Hundreds of hours of perf learnings, distilled

ContactSign Up for Free
Official Plugin
View plugin on GitHub

gatsby-plugin-styled-components

A Gatsby plugin for styled-components with built-in server-side rendering support.

Install

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

How to use

Edit gatsby-config.js

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

Options

You can pass options to the plugin, see the Styled Components docs for a full list of options.

For example, to disable the displayName option:

options: {
  displayName: false
}

Note: The ssr option will be ignored. Gatsby will apply it automatically when needed.

Disabling vendor prefixing

If you don’t require vendor prefixes for adding legacy CSS properties then this can be disabled by supplying the disableVendorPrefixes option:

options: {
  disableVendorPrefixes: true
}
© 2022 Gatsby, Inc.