React Style is an approach for styling React components. It uses the same
syntax as StyleSheet.create from React Native.
Define styles using full power of JavaScript:
var StyleSheet = require('react-style')
var styles = StyleSheet.create({
foo: {
color: 'red',
backgroundColor: 'white'
}
})
Style React components:
var React = require('react')
class HelloWorld extends React.Component{
render() {
var dynamicStyles = {color: this.props.color}
return <div styles={[styles.foo, dynamicStyles]}>Hello, world!</div>
}
}
By default styles are applied to the DOM as inline styles.
There's React Style Webpack plugin which extends Webpack with the
ability to extract styles from your application at build time. The result is a
bundle.css file which can be added to <head>.
Generated CSS class names are descriptive by default and minimized when using
NODE_ENV=production.
To make sure that the order of the styles property is maintained, React Style
uses a CSS overrides hack which results in the above example results in:
.foo,.foo.foo1,.foo.foo1.foo2. (etc.)
By default an amount of 10 is used, but can be adjusted by setting the
maxOverridesLength property:
var StyleSheet = require('react-style')
StyleSheet.maxOverridesLength = 1;
Source Maps are supported, but only for the generated JavaScript.
There's React Style syntax which allows you to write styles like this:
var styles = StyleSheet.create`
.foo {
color: red;
background-color: white;
}
`
And have it transformed into:
var styles = StyleSheet.create({
foo {
color: 'red',
backgroundColor: 'white'
}
})
This syntax is consistent with ES6 tagged template literal.
The syntax helpers are convenient when transitioning a large CSS code base to React Style. It makes it possible to directly copy paste styles from your CSS and later refactor them into a more modular form.
Note that we only support classNames of 1 level deep.
Media queries are supported by React Style with the following syntax:
var fooStyles = StyleSheet.create({
bar: {
color: 'green'
},
'@media screen and (min-width: 800px)': {
bar: {
color: 'purple'
}
}
});
If you want to use media queries inside the render function, we recommend
using window.matchMedia.
Currently not supported by React Style Syntax helpers.
A lot, and @vjeux covered it pretty good in his presentation: CSS in JS
React Style does not support CSS selectors, pseudo-classes and CSS animation.
Mostly because we try to avoid implicit behaviour and want the user to make
layout decisions inside the render() function.
CSS selectors introduce implicit behaviour by not having a direct link with the elements on which they're applied. Therefore there is no way of knowing what the consequences are, and this easily leads to refactoring issues. Instead you should be using plain JavaScript variables.
Classes with pseudo-classes have a higher precedence then classes with no
pseudo-classes, which results in issues if you want to override styling in
"higher-level" components. In some cases(:before, after, etc.) a component
is easily added, in others (active, focus, hover, etc) plain JavaScript
will do the trick. In all, you don't need CSS for this. In some cases though
you might want to use pseudo-classes (like styling a scrollbar) - which we do
support.
Animations inside CSS also introduce implicit behaviour, as CSS animations are decoupled from logic. By being decoupled, the state of the component is split between the component and the CSS animation. We however believe state should be contained within a component. An example of solving this using JS is React Magician.
MIT