Bringing Classes to Inline Styles
npm install @aliyun-sls/reactcss[![Build Status][travis-svg]][travis-url]
[![dependency status][deps-svg]][deps-url]
[![dev dependency status][dev-deps-svg]][dev-deps-url]
[![License][license-image]][license-url]
[![Downloads][downloads-image]][downloads-url]
``
npm install reactcss --save
Define a default styles for your elements:
`javascript
import reactCSS from 'reactcss'
const styles = reactCSS({
'default': {
card: {
background: this.props.background,
boxShadow: '0 2px 4px rgba(0,0,0,.15)',
},
},
})
`
Pass style definitions via inline styles:
`javascript`
Activate additional classes by passing down objects as additional parameters to reactCSS:`javascript``
const styles = 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,
})
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
[travis-svg]: https://travis-ci.org/casesandberg/reactcss.svg
[travis-url]: https://travis-ci.org/casesandberg/reactcss
[deps-svg]: https://david-dm.org/casesandberg/reactcss.svg
[deps-url]: https://david-dm.org/casesandberg/reactcss
[dev-deps-svg]: https://david-dm.org/casesandberg/reactcss/dev-status.svg
[dev-deps-url]: https://david-dm.org/casesandberg/reactcss#info=devDependencies
[npm-badge-png]: https://nodei.co/npm/reactcss.png?downloads=true&stars=true
[license-image]: http://img.shields.io/npm/l/reactcss.svg
[license-url]: LICENSE
[downloads-image]: http://img.shields.io/npm/dm/reactcss.svg
[downloads-url]: http://npm-stat.com/charts.html?package=reactcss