@iamstarkov/react-jss-theming-plus v6.1.1
React integration of JSS
There is a number of benefits when using react-jss instead of JSS directly:
- Theming support out of the box.
- Lazy evaluation - sheet is created only when component will mount.
- Auto attach/detach - sheet will be rendered to the dom when component is about to mount and will be removed when no element needs it.
- A sheet gets shared between all elements.
- You want to use it with React Hot Loader.
Also you may need this module if you build a big application where leaving all styles in the DOM or compiling all styles at once may have a performance overhead or you are going to hit IE limits.
Table of Contents
Install
npm install --save react-jss
Usage
You can use it as a higher-order component to inject JSS. It can act both as a simple wrapping function and as a ES7 decorator.
React JSS wraps your React component and injects props.classes
and props.sheet
, which is a regular JSS StyleSheet, as props into your component. This is a common pattern that is used for composition in React instead of mixins, and works equally well with old-style createClass
classes, as well as the ES6 classes.
Because JSS class names are namespaced by default, you will need to reach into this.props.classes
to get their real names. For example, if you define a button
class in your JSS stylesheet, its real name will be available as props.classes.button
.
By default react-jss comes with jss and presets.
Basic
import React from 'react'
import injectSheet from 'react-jss'
const styles = {
button: {
background: props => props.color
},
label: {
fontWeight: 'bold'
}
}
const Button = ({classes, children}) => (
<button className={classes.button}>
<span className={classes.label}>
{children}
</span>
</button>
)
export default injectSheet(styles)(Button)
Theming
import { ThemeProvider, withTheme } from 'react-jss';
Idea is simple. You define theme object
. You pass it to ThemeProvider
which in turn passes it to context
, then you use withTheme
to map it back from context
to components props
. After that you may change your theme, and all your components will get new theme automatically.
Under the hood react-jss
uses unified CSSinJS theming
solution for React. You can find detailed docs in its repo.
In your app you will need ThemeProvider
:
- It has
theme
prop which should be anobject
orfunction
:- If it is an
Object
and used in a rootThemeProvider
then it's intact and being passed down the react tree. - If it is
Object
and used in a nestedThemeProvider
then it's being merged with theme from a parentThemeProvider
and passed down the react tree. - If it is
Function
and used in a nestedThemeProvider
then it's being applied to the theme from a parentThemeProvider
. If result is anObject
it will be passed down the react tree, throws otherwise.
- If it is an
ThemeProvider
as every other component can render only single children, because it usesReact.Children.only
in render, which returns the only child in children. Throws otherwise.- Read more about
ThemeProvider
intheming
's documentation.
import React from 'react'
import { ThemeProvider } from 'react-jss'
import { Button } from './components'
const theme = {
colorPrimary: 'green',
};
const App = () => {
<ThemeProvider theme={theme}>
<Button>I am a button with green background</Button>
</ThemeProvider>
}
export default App;
In your components you will need withTheme
. It is a Higher-order Component which takes a single React.Component
and maps a theme object from context to props. Read more about withTheme
in theming
's documentation.
import React from 'react'
import injectSheet, { withTheme } from 'react-jss'
const styles = {
button: {
background: props => props.theme.colorPrimary
},
label: {
fontWeight: 'bold'
}
}
const Button = ({classes, children}) => (
<button className={classes.button}>
<span className={classes.label}>
{children}
</span>
</button>
)
export default withTheme(injectSheet(styles)(Button))
Server-side rendering
import {renderToString} from 'react-dom/server'
import {SheetsRegistryProvider, SheetsRegistry} from 'react-jss'
import MyApp from './MyApp'
export default function render(req, res) {
const sheets = new SheetsRegistry()
const body = renderToString(
<SheetsRegistryProvider registry={sheets}>
<MyApp />
</SheetsRegistryProvider>
)
// any instances of `injectStyle` within `<MyApp />` will have gotten `sheets`
// from `context` and added their style sheets to it by now.
return res.send(renderToString(
<html>
<head>
<style type="text/css">
{sheets.toString()}
</style>
</head>
<body>
{body}
</body>
</html>
))
}
Reuse same StyleSheet in different Components
Sometimes you may need to reuse the same StyleSheet
in different components, without generating new styles for each. You can pass StyleSheet
instance to the injectSheet?
function instead of styles
object.
import React, {Component} from 'react'
import injectSheet, { jss } from 'react-jss'
const sheet = jss.createStyleSheet({
button: {
color: 'red'
}
})
@injectSheet(sheet)
class Button extends Component {
render() {
const {classes} = this.props
return <button className={classes.button}></button>
}
}
classNames helper
You can use classNames together with JSS same way you do it with global CSS.
import classNames from 'classnames'
const Component = ({classes, children, isActive}) => (
<div
className={classNames({
[classes.normal]: true,
[classes.active]: isActive
})}>
{children}
</div>
)
The inner component
const InnerComponent = () => null
const StyledComponent = injectSheet(styles, InnerComponent)
console.log(StyledComponent.InnerComponent) // Prints out the inner component.
Custom setup
If you want to specify a jss version and plugins to use, you should create your own jss instance, setup plugins and create a injectSheet
function which has your jss version bound.
import {create as createJss} from 'jss'
import {create as createInjectSheet} from 'react-jss'
import vendorPrefixer from 'jss-vendor-prefixer'
const jss = createJss()
jss.use(vendorPrefixer())
export const injectSheet = createInjectSheet(jss)
You can also access the Jss instance being used by default.
import {jss} from 'react-jss'
Decorators
Beware that decorators are stage-2 proposal, so there are no guarantees that decorators will make its way into language specification. Do not use it in production. Use it at your own risk and only if you know what you are doing.
You will need babel-plugin-transform-decorators-legacy.
import React, {Component} from 'react'
import injectSheet from 'react-jss'
const styles = {
button: {
backgroundColor: 'yellow'
},
label: {
fontWeight: 'bold'
}
}
@injectSheet(styles)
export default class Button extends Component {
render() {
const {classes, children} = this.props
return (
<button className={classes.button}>
<span className={classes.label}>
{children}
</span>
</button>
)
}
}
Contributing
See our contribution guidelines.
License
MIT
7 years ago