css样式设置

（1）CSS Modules

参考资料：http://www.ruanyifeng.com/blog/2016/06/css_modules.html

1）Webpack 设置

{

        test: /\.css$/,

        loader: "style-loader!css-loader?modules"     

}

在css-loader后面加了一个查询参数modules，表示打开 CSS Modules 功能。

默认根据[hash:base64]的规则进行hash编码，如果需要自定义编码方式，则修改localIdentName参数

{

loader: 'css-loader',

options: {

modules: true,

localIdentName: '[path][name]---[local]---[hash:base64:5]'

}

}

2）全局作用域

CSS Modules 允许使用:global(.className)的语法，声明一个全局规则。凡是这样声明的class，都不会被编译成哈希字符串，可以全局通用

不添加global时默认为局部规则，进行哈希编码

.title {

  color: red;

}

:global(.title) {

  color: green;

}

相当于：

:local(.title) {

  color: red;

}

:global(.title) {

  color: green;

}

3）Class 的组合

在 CSS Modules 中，一个选择器可以继承另一个选择器的规则，这称为"组合"（"composition"）。

App.css中样式为：

.className {

  background-color: blue;

}

.title {

  composes: className;

  color: red;

}

选择器也可以继承其他CSS文件里面的规则。比如className在another.css中定义：

.className {

  background-color: blue;

}

App.css可以继承another.css里面的规则。

.title {

  composes: className from './another.css';

  color: red;

}

4）自定义变量

CSS Modules 支持使用变量，不过需要安装 PostCSS 和 postcss-modules-values。

$ npm install --save postcss-loader postcss-modules-values

把postcss-loader加入webpack.config.js。

      {

        test: /\.css$/,

        loader: "style-loader!css-loader?modules!postcss-loader"

      }

接着，在colors.css里面定义变量。

@value blue: #0c77f8;

@value red: #ff0000;

@value green: #aaf200;

App.css可以引用这些变量。

@value colors: "./colors.css";

@value blue, red, green from colors;

.title {

  color: red;

  background-color: blue;

}

（2）React-classnames库的使用方法

react原生动态添加多个className会报错

import style from './style.css'

因此想要得到最终渲染的效果，引入classnames库

npm install classnames --save

使用：

import classnames from 'classnames'

    'class1': true,

    'class2': true

})>

其他用法：

classNames('foo', 'bar'); // => 'foo bar'

classNames('foo', { bar: true }); // => 'foo bar'

classNames({ foo: true }, { bar: true }); // => 'foo bar'

classNames({ foo: true, bar: true }); // => 'foo bar'

 //传入动态class

let buttonType = 'primary';

classNames({ [`btn-${buttonType}`]: true });

举例说明：

不使用classnames时的书写方式：

var Button = React.createClass({

  // ...

  render () {

    var btnClass = 'btn';

    if (this.state.isPressed) btnClass += ' btn-pressed';

    else if (this.state.isHovered) btnClass += ' btn-over';

    return {this.props.label};

  }

}

});

使用了之后可以简化：

var classNames = require('classnames');

var Button = React.createClass({

  // ...

  render () {

    var btnClass = classNames({

      btn: true,

      'btn-pressed': this.state.isPressed,

      'btn-over': !this.state.isPressed && this.state.isHovered

    });

    return {this.props.label};

  }

}

});