神刀安全网

Generate React components directly out of CSS

React CSS components

Motivation

Define React presentational components with CSS.

The implementation is based onCSS modules. In fact React CSS Components is just a thin API on top of CSS modules.

Installation & Usage

Install from npm:

% npm install react-css-components 

Configure in webpack.config.js :

module.exports = {   ...   module: {     loaders: [       {         test: //.react.css$/,         loader: 'babel-loader!react-css-components/webpack',       }     ]   }   ... } 

Now you can author React components in Styles.react.css :

Label {   color: red; }  Label:hover {   color: white; } 

And consume them like regular React components:

import {Label} from './styles.react.css'  <Label /> // => <div className="<autogenerated classname>">...</div> 

Variants

You can define additional styling variants for your components:

Label {   color: red; }  Label:emphasis {   font-weight: bold; } 

They are compiled as CSS classes which then can be controlled from JS via variant prop:

<Label variant={{emphasis: true}} /> // sets both classes with `color` and `font-weight` 

Prop variants

You can define variants which are based on some JavaScript expression against props:

Label {   color: red; }  Label:prop(mode == "emphasis") {   font-weight: bold; } 

They are compiled as CSS classes which then can be controlled from JS:

<Label mode="emphasis" /> // sets both classes with `color` and `font-weight` 

TODO

  • Document how to add PostCSS transform to build pipeline (think autoprefixer).

转载本站任何文章请注明:转载至神刀安全网,谢谢神刀安全网 » Generate React components directly out of CSS

分享到:更多 ()

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址