CSS Modules 允许使用`:global(.className)`的语法,声明一个全局规则。凡是这样声明的`class`,都不会被编译成哈希字符串。
[`App.css`](https://github.com/ruanyf/css-modules-demos/blob/master/demo02/components/App.css)加入一个全局`class`。
~~~
.title {
color: red;
}
:global(.title) {
color: green;
}
~~~
[`App.js`](https://github.com/ruanyf/css-modules-demos/blob/master/demo02/components/App.css)使用普通的`class`的写法,就会引用全局`class`。
~~~
import React from 'react';
import styles from './App.css';
export default () => {
return (
<h1 className="title">
Hello World
</h1>
);
};
~~~
运行这个示例。
~~~
$ npm run demo02
~~~
打开 http://localhost:8080,应该会[看到](http://ruanyf.github.io/css-modules-demos/demo02/)`h1`标题显示为绿色。
CSS Modules 还提供一种显式的局部作用域语法`:local(.className)`,等同于`.className`,所以上面的`App.css`也可以写成下面这样。
~~~
:local(.title) {
color: red;
}
:global(.title) {
color: green;
}
~~~