Official Plugin

gatsby-plugin-styletron

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

This plugin supports styletron-react v5. Check the release notes for more details about v5.

Install

npm install gatsby-plugin-styletron styletron-react styletron-engine-atomic

How to use

Edit gatsby-config.js

module.exports = {
  plugins: [
    {
      resolve: `gatsby-plugin-styletron`,
      options: {
        // You can pass options to Styletron.
        prefix: "_",
        // Disable dev debug mode, enabled by default
        debug: false,
      },
    },
  ],
}

This can be used as described by styletron-react such as:

import React from "react"
import { styled, useStyletron } from "styletron-react"

// statically styled component
const RedAnchor = styled("a", { color: "red" })

// dynamically styled component
const BigAnchor = styled("a", ({ $size }) => ({ fontSize: `${$size}px` }))

const IndexPage = () => {
  // an alternative hook based API
  const [css] = useStyletron()
  return (
    <div>
      <RedAnchor>Red Anchor</RedAnchor>
      <BigAnchor $size={64}>Big Anchor</BigAnchor>
      <p className={css({ color: "blue" })}>blue text</p>
    </div>
  )
}

Check more documentation and examples at styletron.org.