README.md

Comparison of CSS in JS Libraries for React

Library	Syntax	Mechanism	Override mechanism	Compile-time step	Media Queries	Pseudo styles	CSS Syntax	Animations	ES6 Classes	Vendor Prefixes	Dynamic styles	Universal/Isomorphic (runs on server)
Radium	Plain objects, { ':hover': {...} + style attribute + HOC	Pure inline styles	Object.assign	No	Yes	Yes - :hover, :active, :focus	Yes	Yes	Yes	Yes	Yes - anything can be done at runtime	Yes, including keyframes and media queries
React Style	StyleSheet.create(...) + style attribute + monkey patching	Converts to CSS	CSS overrides hack - .foo,.foo.foo1,.foo.foo1.foo2. (etc.)	Optional	Yes	No	Yes	No	Yes	Yes, if using webpack extraction plugin	Yes - using inline styles	Yes, if using extraction
React Inline	StyleSheet.create(...) + class attribute	Converts to CSS	Unknown	Yes	Yes	Yes - all that are supported by CSS	No	No	Yes	Yes, after extraction	Yes - using inline styles	Yes
jsxstyle	JSX props, <Block marginLeft={12} color={Theme.COLOR} />	Converts to CSS	Unknown	Yes	Not yet	Yes	No	No	Yes	Yes, after extraction	Yes - using inline styles	Yes
React JSS	Plain objects + className attribute + HOC	Converts to CSS	extend plugin	Optional	Yes	Yes	No	Yes	Yes	Yes	Yes - using inline styles	Yes
ReactShadow	External CSS files	Shadow DOM for scoping	Same pitfalls as CSS	No	Yes	Yes	Yes	Yes	No	Yes, on external css	Yes - using inline styles	Yes
native-css	External CSS files	Generates StyleSheet.create declarations from CSS file for use with React Style	-	-	-	-	Yes	-	-	-	-	-
react-in-style	Plain objects, nested + className attribute + HOC	Converts to CSS	Same pitfalls as CSS	No	No	Yes	No	No	Yes	Yes, autoprefixer	Yes - using inline styles	Unknown
react-css-builder	Plain objects + chained helpers css.include(...).mixin(...).attr(...).css()	Converts to CSS	Same pitfalls as CSS	No	No	No	No	No	Yes	Yes - mixins	Yes - using inline styles	Unknown
React Free Style	var TEXT_STYLE = Style.registerStyle({...}); + className attribute + HOC + <Style.Element />	Converts to CSS	Explicit - FreeStyle#registerStyle(a, b, c)	No	Yes	Yes	No	Yes	Yes	Unknown	Yes - explicit support this.context.freeStyle.registerStyle(...)	Yes
React Inline CSS	<InlineCss stylesheet="...">{children}</InlineCss>	Converts to CSS	Same pitfalls as CSS	No	Yes	Yes	Yes	Yes	Yes	Unknown	Yes - using inline styles	Unknown
React Look	StyleSheet.create(...), { ':hover': {...} + style attribute + HOC	Inline styles + Convert to CSS e.g. ::-webkit-input-placeholder	assign-styles (Object.assign with !important support)	No	Yes	Yes, 30 pure JS + CSS polyfill for others	Yes, Sass-like nesting	Yes	Yes	Yes, inline-style-prefixer	Yes, stateful values & stateful styles	Yes, media queries with special plugin
React Statics Styles	statics: { styles: { ... } }	Converts to CSS	Same pitfalls as CSS	Yes	Yes	Yes	No	Yes	Yes	Yes, after extraction	Yes - using inline styles	Yes
react-styl	require('react-styl')('...css...') + require('react-style').addStylesheet();	Converts to CSS	Same pitfalls as CSS	No	Yes	Yes	Yes	Yes	Yes	No	Yes - using inline styles	No
smart-css	css.setClass('.b', { ... }) + SmartCSS.injectStyles()	Converts to CSS	Same pitfalls as CSS	No	Yes	Yes	No	No	Yes	Not yet	Yes - using inline styles	Not yet
Stilr	StyleSheet.create(...) + class attribute	Converts to CSS	Same pitfalls as CSS	Optional	Yes	Yes	No	Yes	Yes	Yes, after extraction	Yes - using inline styles	Yes, if using extraction