CSSModules入门

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接： https://blog.csdn.net/HH921227/article/details/102737077

局部作用域

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;
}