Official Plugin

gatsby-plugin-styled-jsx

Provides drop-in support for styled-jsx.

Install

npm install styled-jsx gatsby-plugin-styled-jsx

How to use

Add the plugin to the plugins array in your gatsby-config.js and use <style jsx> tags in your component files.

plugins: [`gatsby-plugin-styled-jsx`]

You can add styled-jsx plugins with the jsxPlugins option

plugins: [
  {
    resolve: `gatsby-plugin-styled-jsx`,
    options: {
      jsxPlugins: ["styled-jsx-plugin-postcss"],
    },
  },
]

Configuration options for styled-jsx can also be specified:

plugins: [
  {
    resolve: `gatsby-plugin-styled-jsx`,
    options: {
      optimizeForSpeed: true,
      sourceMaps: false,
      vendorPrefixes: true,
    },
  },
]