[英] React CSS components - 用 React 实现的 CSS 组件

Table of Contents

• Motivation
• Installation & Usage
• Base components
  • DOM components
  • Composite components
• Variants
  • Named variants
  • JavaScript expressions
• Customizing CSS loading
  • CSS extraction
  • Using with SASS/SCSS/LESS/Stylus/...
  • Using with PostCSS (including autoprefixer)

Motivation

Define React presentational components with CSS.

The implementation is based on CSS 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'

 // => 
...

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:

 // 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:

 // sets both classes with `color` and `font-weight`

TODO

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