（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'
<div className={style.class1 style.class2}</div>
因此想要得到最终渲染的效果，引入classnames库
npm install classnames --save
使用：
import classnames from 'classnames'
<div className=classnames({
'class1': true,
'class2': true
})>
</div>
其他用法：
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 <button className={btnClass}>{this.props.label}</button>;
}
}
});
使用了之后可以简化：
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 <button className={btnClass}>{this.props.label}</button>;
}
}
});
网友评论