npm

Don't miss out on this year's npm Pride t-shirt designs!Order your favorites here »

gatsby-plugin-styletron

4.1.0 • Public • Published

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

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.

install

npm i gatsby-plugin-styletron

Downloadsweekly downloads

730

version

4.1.0

license

MIT

homepage

github.com

repository

Gitgithub

last publish

collaborators

  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
Report a vulnerability