Themes for styled-jsx

Minimal themes (made with styled-jsx) for providing basic visual happiness in server-rendered React apps.

Demo

https://styled-jsx-themes.now.sh/

Setup

This library is purposely not transpiled¹ so your build tool will need to be configured to transpile JS inside your app's ./node_modules/styled-jsx-themes directory. A convenience helper is provided for Next.js.

// ./next.config.js
const transpile = require('styled-jsx-themes/transpile')
module.exports = { webpack: transpile }

Install

yarn add styled-jsx-themes

Usage

Inject a theme you in your app layout with the helper component.

// pages/_app.js
import App, { Container } from 'next/app'
import InjectTheme from 'styled-jsx-themes'

import { dark } from 'styled-jsx-themes/themes'
import { merriweatherMuli } from 'styled-jsx-themes/fonts'

class MyApp extends App {
  static async getInitialProps({ Component, ctx }) {
    let pageProps = {}
    if (Component.getInitialProps) {
      pageProps = await Component.getInitialProps(ctx)
    }
    return { pageProps }
  }

  render () {
    const { Component, pageProps } = this.props
    return (
      <Container>
        <InjectTheme
          theme={dark}
          font={merriweatherMuli} />
        <Component {...pageProps} />
      </Container>
    )
  }
}

API

<InjectTheme />

theme (theme, required)

Object describing a theme

See ./themes.js

font (theme, required)

Object describing a pair of fonts

See ./fonts.js

reset (bool, default: true)

Include/exclude CSS reset (normalize.css)

Caveats

This library is currently bound to Next.js but could be easily separated if we generalize the webfont loading to work with other SSR frameworks.

Why no transpiling in repo?

After trying a number of different approaches I decided that there's no way to transpile styled-jsx components outside of Next.js apps without breaking server side rendering. That said I would be excited to learn that I'm wrong and there's an easy way transpile ahead of time and avoid the extra setup. Please reach out to me at mikebannister@gmail.com if you can help, thanks!

Credits

• Most CSS in this repo is copied from sakura.css. Thanks to the authors.
• A styled-jsx-ified copy of normalize.css is also included. Thanks to the authors.