二、全局作用域

最后更新于:2022-04-01 23:31:01

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 (

Hello World

); }; ~~~ 运行这个示例。 ~~~ $ 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; } ~~~
';