ReactCSS

Inline Styles in JS with support for React, React Native, Autoprefixing, Hover, Pseudo-Elements & Media Queries

Install

npm install reactcss --save

Style Object

Define a default styles for your elements:

importreactCSSfrom'reactcss'conststyles=reactCSS({'default': {card: {background: this.props.background,boxShadow: '0 2px 4px rgba(0,0,0,.15)',},},})

Pass style definitions via inline styles:

<divstyle={styles.card}/>

Activating Classes

Activate additional classes by passing down objects as additional parameters to reactCSS:

conststyles=reactCSS({'default': {card: {background: '#fff',boxShadow: '0 2px 4px rgba(0,0,0,.15)',},},'zIndex-2': {card: {boxShadow: '0 4px 8px rgba(0,0,0,.15)',},},},{'zIndex-2': props.zIndex===2,})

Documentation

See the Full Documentation

Examples

Examples and projects built with reactCSS:

Felony - Next Level PGP Desktop App React Color - Color Pickers from Sketch, Photoshop, Chrome, Github, Twitter & more Buffer App Components - A shared set of UI Components React Reactions - Use Reactions from Slack, Facebook, Pokemon, Github and Youtube