版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
局部作用域
CSS的规则都是作用于全局的,任何一个组件的样式都是对整个页面起作用的。产生局部作用域的方法就是为每一个样式生成唯一名称,而这也是CSSModules的做法。
import React from 'react';
import styles from './styles.css';
export default const App = (props) => (<div className={styles.title}>welcome {props.name}!</div>)
然后编译工具将class
编译产生唯一的标识。
<div class="_3zyde4l1yATCOkgn-DBWEL">welcome React!</div>
// styles.css
._3zyde4l1yATCOkgn-DBWEL {
color: red;
}
对插件对支持
CSSModules
提供各种插件支持。如对webpack
对css-loader
的插件只需要在options
配置modules: true
即可。
全局作用域
CSSModules
支持使用:global(.className)
的语法声明一个全局规则。
:global(.title) {
color: green;
}
calss组合
一个选择器继承另一个选择器的规则,为组合(composition)。
.parent {
background-color: red;
}
.title {
compose: .parent;
color: green;
}
选择器也可以继承其他文件的css规则。
/* other.css */
.parent {
background-color: red;
}
.title {
compose: .parent from './other.css';
color: green;
}