jss-theme-reactor

Installation

Install jss-theme-reactor.

$ npm install jss-theme-reactor --save

Usage

• Basic example
• React integration
• Server-side rendering

Basic example

A super simple example demonstrating the basic functionality.

import { create as createJss } from 'jss';
import preset from 'jss-preset-default';
import { createStyleManager, createStyleSheet } from 'jss-theme-reactor';

themeObj = {
  fontFamily: 'Roboto',
  fontSize: 12,
  color: 'red',
};

styleManager = createStyleManager({
  jss: createJss(preset()),
  theme: themeObj,
});

styleSheet = createStyleSheet('button', (theme) => ({
  root: {
    color: theme.color,
    fontSize: theme.fontSize,
    fontFamily: theme.fontFamily,
  },
}));

const classes = styleManager.render(styleSheet);

// classes.root === '.button-root-1l7rpve'

Resulting document head:

<style type="text/css" data-jss="" data-meta="button">
.button-root-1l7rpve {
  color: red;
  font-size: 12px;
  font-family: Roboto;
}
</style>