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-atomicHow 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.