Define React presentational components with CSS.
The implementation is based on CSS modules. In fact React CSS Components is just a thin API on top of CSS modules.
Install from npm:
% npm install react-css-components
Configure in webpack.config.js
:
module.exports = {
...
module: {
loaders: [
{
test: /\.react.css$/,
loader: 'babel-loader!react-css-components/webpack',
}
]
}
...
}
Now you can author React components in Styles.react.css
:
Label {
color: red;
}
Label:hover {
color: white;
}
And consume them like regular React components:
import {Label} from './styles.react.css'
<Label /> // => <div className="<autogenerated classname>">...</div>
You can define additional styling variants for your components:
Label {
color: red;
}
Label:emphasis {
font-weight: bold;
}
They are compiled as CSS classes which then can be controlled from JS via
variant
prop:
<Label variant={{emphasis: true}} /> // sets both classes with `color` and `font-weight`
You can define variants which are based on some JavaScript expression against props:
Label {
color: red;
}
Label:prop(mode == "emphasis") {
font-weight: bold;
}
They are compiled as CSS classes which then can be controlled from JS:
<Label mode="emphasis" /> // sets both classes with `color` and `font-weight`
- Document how to add PostCSS transform to build pipeline (think autoprefixer).