A set of tools to manage inline styles on React elements
npm install radium
Radium is a set of tools to manage inline styles on React elements. It gives you powerful styling capabilities without CSS.
Eliminating CSS in favor of inline styles that are computed on the fly is a powerful approach, providing a number of benefits over traditional CSS:
- Scoped styles without selectors
- Avoids specificity conflicts
- Source order independence
- Dead code elimination
- Highly expressive
Despite that, there are some common CSS features and techniques that inline styles don't easily accommodate: media queries, browser states (:hover, :focus, :active) and modifiers (no more .btn-primary!). Radium offers a standard interface and abstractions for dealing with these problems.
- Modifier styles based on component props
- Media queries
- Browser state styles to support
- Dynamic computed styles
Start by writing a style object with a combination of default styles, browser states, media queries, and modifiers. Pass the object to
this.buildStyles() and Radium will determine the correct group of style rules to apply to your component.
var React = require'react';var StyleResolverMixin BrowserStateMixin = require'radium';var color = require'color';var Button = ReactcreateClassmixins: StyleResolverMixin BrowserStateMixinvar styles =padding: '1.5em 2em'border: 0borderRadius: 4color: '#fff'cursor: 'pointer'fontSize: 16fontWeight: 700states:hover:background: color'#0074d9'lighten0.2hexStringfocus:boxShadow: '0 0 0 3px #eee, 0 0 0 6px #0074D9'outline: 'none'modifiers:kind:primary: background: '#0074D9'warning: background: '#FF4136';return<buttonthisgetBrowserStateEventsstyle=thisbuildStylesstyles>thispropschildren</button>;;
To see local examples in action, do this:
npm installnpm run examples