react-with-styles
Use CSS-in-JavaScript for your React components without being tightly coupled to one implementation (e.g. Aphrodite, Radium, or React Native). Easily access shared theme information (e.g. colors, fonts) when defining your styles.
Interfaces
Other resources
- eslint-plugin-react-with-styles: ESLint plugin for react-with-styles.
How to use
Create a module that exports an object with shared theme information like colors.
color: primary: '#FF5A5F' secondary: '#00A699' ;
Register your default theme and interface. For example, if your default theme is exported by MyDefaultTheme.js
, and you want to use Aphrodite, you can set this up in your own withStyles.js
file.
;;; ; ThemedStyleSheet;ThemedStyleSheet; ;
It is convenient to pass through css
, withStyles
, and ThemeProvider
from react-with-styles
here so that everywhere you use them you can be assured that the default theme and interface have been registered. You could likely also set this up as an initializer that is added to the top of your bundles and then use react-with-styles
directly in your components.
In your component, from our withStyles.js
file above, use withStyles()
to define styles and css()
to consume them.
import React PropTypes from 'react';import css withStyles from './withStyles'; { return <div> <a ="/somewhere" > A link to somewhere </a> ' ' and ' ' <a ="/somewhere-else" > a link to somewhere else </a> </div> ;} MyComponentpropTypes = styles: PropTypesobjectisRequired; color firstLink: color: colorprimary secondLink: color: colorsecondary MyComponent;
ThemedStyleSheet
Registers themes and interfaces.
ThemedStyleSheet.registerDefaultTheme(theme)
Registers the default theme. theme
is an object with properties that you want to be made available when styling your components.
; ThemedStyleSheet;
ThemedStyleSheet.registerTheme(name, overrides)
Registers a named theme that defines overrides for the default theme. This object is merged with the default theme.
; ThemedStyleSheet;
Combined with the above example for default theme, color.primary
would be 'yellow'
and color.secondary
would be '#00A699'
.
ThemedStyleSheet.registerInterface(interface)
Instructs react-with-styles how to process your styles.
;; ThemedStyleSheet;
<ThemeProvider name="theme name">
This component simply takes a name
prop that matches a registered theme, and stores that value in context. This allows sub-trees of your application to change to different themes as necessary.
import React from 'react';import ThemeProvider from './withStyles'; { return <div> <MyComponent /> <ThemeProvider ="tropical"> <MyComponent /> </ThemeProvider> </div> ;}
withStyles([ stylesThunk [, options ] ])
This is a higher-order function that returns a higher-order component used to wrap React components to add styles using the theme provided from context. We use this to abstract away the context, to make themed styles easier to work with.
stylesThunk
will receive the theme as an argument, and it should return an object containing the styles for the component.
The wrapped component will receive a styles
prop containing the processed styles for this component and a theme
prop with the current theme object. Most of the time you will only need the styles
prop. Reliance on the theme
prop should be minimized.
Example usage
import React from 'react';import css withStyles from './withStyles'; { return <div > Try to be a rainbow in cloud </div> ;} color unit container: color: colorprimary marginBottom: 2 * unit MyComponent;
Or, as a decorator:
import React from 'react';import css withStyles from './withStyles'; @ { return <div > Try to be a rainbow in cloud </div> ;}
Options
stylesPropName
(default: 'styles'
)
By default, withStyles()
will pass down the styles to the wrapped component in the styles
prop, but the name of this prop can be customized by setting the stylesPropName
option. This is useful if you already have a prop called styles
and aren't able to change it.
import React from 'react';import css withStyles from './withStyles'; { return <div > Try to be a rainbow in cloud </div> ;} color unit container: color: colorprimary marginBottom: 2 * unit stylesPropName: 'withStylesStyles' MyComponent;
themePropName
(default 'theme'
)
Likewise, the theme prop name can also be customized by setting the themePropName
option.
import React from 'react';import css withStyles from './withStyles'; { return <div > <Background => Try to be a rainbow in cloud </Background> </div> ;} color unit container: color: colorprimary marginBottom: 2 * unit themePropName: 'withStylesTheme' MyComponent;
flushBefore
(default: false
)
Some components depend on previous styles to be ready in the component tree when mounting (e.g. dimension calculations). Some interfaces add styles to the page asynchronously, which is an obstacle for this. So, we provide the option of flushing the buffered styles before the rendering cycle begins. It is up to the interface to define what this means.
css(...styles)
This function takes styles that were processed by withStyles()
, plain objects, or arrays of these things. It returns an object with an opaque structure that must be spread into a JSX element.
import React from 'react';import css withStyles from './withStyles'; { return <div > Try to be a rainbow in' ' <a ="/somewhere" > cloud </a> </div> ;} color unit container: color: colorprimary marginBottom: 2 * unit link: color: colorsecondary link_bold: fontWeight: 700 MyComponent;
className
and style
props must not be used on the same elements as css()
.
Examples
Link
With React Router's React Router's <Link/>
and <IndexLink/>
components accept activeClassName='...'
and activeStyle={{...}}
as props. As previously stated, css(...styles)
must spread to JSX, so simply passing styles.thing
or even css(styles.thing)
directly will not work. In order to mimic activeClassName
/activeStyles
you can use React Router's withRouter()
Higher Order Component to pass router
as prop to your component and toggle styles based on router.isActive(pathOrLoc, indexOnly)
. This works because <Link />
passes down the generated className
from css(..styles)
down through to the final leaf.
import React from 'react';import withRouter Link from 'react-router';import css withStyles from '../withStyles'; { return <div > <Link ="/" > home </Link> <Link ="/somewhere" > somewhere </Link> </div> ;} Nav;