Install jss-theme-reactor
.
$ npm install jss-theme-reactor --save
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-tr-1'
Resulting document head:
<style type="text/css" data-jss="" data-meta="button">
.button-root-tr-1 {
color: red;
font-size: 12px;
font-family: Roboto;
}
</style>