Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 400,000 packages pre-installed, including gatsby-plugin-styled-components with all npm packages installed. Try it out:

require("babel-plugin-styled-components/package.json"); // babel-plugin-styled-components is a peer dependency. require("gatsby/package.json"); // gatsby is a peer dependency. require("styled-components/package.json"); // styled-components is a peer dependency. var gatsbyPluginStyledComponents = require("gatsby-plugin-styled-components")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

gatsby-plugin-styled-components v3.3.10

Gatsby plugin to add support for styled components


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


npm install --save 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


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.

Breaking changes history


support Gatsby v2 only


styled-components is moved to a peer dependency. Installing the package alongside gatsby-plugin-styled-components is now required. Use npm install --save styled-components

RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free