React Style is an approach for styling React components.
Define styles using full power of JavaScript:
var ReactStyle = require('react-style')
var styles = ReactStyle({
color: 'red',
backgroundColor: 'white'
})
Style React components:
var React = require('react')
var HelloWorld = React.createClass({
render() {
var dynamicStyles = ReactStyle({color: this.props.color})
return <div styles={[styles, dynamicStyles]}>Hello, world!</div>
}
})
Now with these two lines you get your application styled and running:
ReactStyle.inject()
React.renderComponent(<HelloWorld color="red" />, document.body)
Styles which are found to be at the module level will be compiled to CSS classes
and injected into DOM as <style> element. Dynamic styles (as dynamicStyles
is defined inside render() method) will be applied to 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>.
There's React Style syntax which allows you to write styles like this:
var styles = ReactStyle`
color: red;
background-color: white;
`
And have it transformed into:
var styles = ReactStyle({
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.
MIT