react-jss-theme

Theming solution for React based on JSS that follows the ideas of future-react-ui and theme-standard. In fact you can implement the proposed theme-standard spec using this solution.

Installation

npm install react-jss-theme --save

Usage

import { createThemeFactory, withTheme, ThemeContextProvider } from "react-jss-theme"

const themeFactory = createThemeFactory(
  (vars) => ({
    color: vars.color,
    classes: {
      button: {
        backgroundColor: vars.color
      },
      label: {
        fontWeight: "bold"
      }
    }
  }))

const RawButton = ({ theme: { color, classes }, children }) => (
  <button className={ classes.button } data-color={ color }>
    <span className={ classes.label }>
      {children}
    </span>
  </button>
)

const Button = withTheme(themeFactory)(RawButton)

const App = () => (
  <ThemeContextProvider themeVars={{ color: "red" }}>
    <Button>Hello</Button>
  </ThemeContextProvider>
)

ReactDOM.render(<App />, mountNode)

With decorator syntax

You can use ES7 with decorators (using babel-plugin-transform-decorators-legacy).

@withTheme(themeFactory)
const Button = ({ theme: { color, classes }, children }) => (
  <button className={ classes.button } data-color={ color }>
    <span className={ classes.label }>
      {children}
    </span>
  </button>
)

Customize component theme

Components wrapped with the withTheme decorator, accepts a theme attribute which merges with the component theme. Class names are never overwritten but appended to the existing ones.

const customThemeFactory = createThemeFactory(
 (vars) => ({
   color: "blue",
   classes: {
     button: {
       backgroundColor: "blue"
     },
     label: {
       fontWeight: "normal"
     }
   }
 }))

@withTheme(customThemeFactory)
const CustomButton = ({ theme, children }) => (
 <Button theme={ theme }>{ children }</Button>
)

Passing a custom JSS instance

You can pass a custom JSS instance to the ThemeContextProvider instead of the default one.

const App = () => (
  <ThemeContextProvider themeVars={ myThemeVars } jss={ myCustomJSS }>
    <Button>Hello</Button>
  </ThemeContextProvider>
)

Passing style sheet options

You can pass style sheet options to createThemeFactory. For all available options consult the JSS API Documentation.

const themeFactory = createThemeFactory(
  (vars) => ({
    color: vars.color,
    classes: {
      button: {
        backgroundColor: vars.color
      },
      label: {
        fontWeight: "bold"
      }
    }
  }), { meta: "my-button-theme" })