Permalink
21 lines (19 sloc) 6.38 KB

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 Not yet 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