React: CSS in JS techniques comparison.
Inside each package folder, run:
npm install
npm run build && open index.html
How to read the table
More crosses doesn't mean "better", it depends on your needs. For example, if a package supports the css file extraction you can run the autoprefixing at build time.
| Package | Version | Autoprefixer Included | Pseudo Classes | Media Queries | Styles As Object Literals | Extract CSS File |
|---|---|---|---|---|---|---|
| bloody-react-styled | 3.0.0 | x | x | |||
| css-loader | 0.15.1 | x | x | x | ||
| j2c | 0.7.3 | x | x | x | x | |
| jsxstyle | 0.0.14 | x | x | |||
| radium | 0.13.2 | x | x | x | x | |
| react-css-builder | 0.2.0 | x | ||||
| react-free-style | 0.5.1 | x | x | x | ||
| react-inline-css | 1.1.1 | x | x | |||
| react-inline | 0.6.3 | x | x | x | x | x |
| react-jss | 1.0.0 | x | x | x | x | |
| react-statics-styles | 2.0.1 | x | x | x | ||
| react-styl | 0.0.1 | x | x | |||
| react-style | 0.5.5 | x | x | x | ||
| smart-css | 1.1.0 | x | x | x | ||
| stilr | 0.2.2 | x | x | x | x |
If your package is not listed here, feel free to add it.