React CSS components
Table of Contents
- Installation & Usage
- Base components
- Customizing CSS loading
Define React presentational components with CSS (or even SASS or Less if you like).
The implementation is based on CSS modules. In fact React CSS Components is just a thin API on top of CSS modules.
NOTE: The current implementation is based on Webpack but everything is ready to be ported onto other build systems (generic API is here just not yet documented). Raise an issue or better submit a PR if you have some ideas.
Installation & Usage
Install from npm:
% npm install react-css-components style-loader css-loader
moduleexports =...module:loaders:test: /\.react.css$/loader: 'react-css-components'...
Now you can author React components in
And consume them like regular React components:
<Label /> // => <div class="<autogenerated classname>">...</div>
By default React CSS Components produces styled
<div /> components. You can
change that by defining
<FancyButton /> renders into
<FancyButton /> // => <button class="<autogenerated classname>">...</button>
In fact any React components which accepts
className props can be used as a
base. That's means that React CSS Components can be used as theming tool for any
Variants is a mechanism which allows to define styling variants for a component.
You can define additional styling variants for your components:
They are compiled as CSS classes which then can be controlled from JS via
<Label variant=emphasis: true /> // sets both classes with `color` and `font-weight`
You can define variants which are conditionally applied if JS expression against props evaluates to a truthy value.
Note that any free variable reference a member of
props, thus in JS
props.mode in the example above.
They are compiled as CSS classes as well. JS expressions within
used to determine if corresponding CSS classes should be applied to DOM:
<Label mode="emphasis" /> // sets both classes with `color` and `font-weight`
Customizing CSS loading
By default React CSS components loads CSS using
chain. That could be configured differently using
loadCSS loader parameter.
This could be used to enable features such as CSS extraction, processing stylesheets with PostCSS/Autoprefixer or even authoring stylesheets with SASS or LESS.
Using with SASS/SCSS/LESS/Stylus/...
See the complete example which uses SASS/SCSS to create React components.
Using with PostCSS (including autoprefixer)
See the complete example which configures PostCSS with Autoprefixer to automatically add vendor prefixes to stylesheets.