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