当前位置:牛骨文开发手册前端基础html/CSSCSS Modules 用法教程 》 二、全局作用域

CSS Modules 允许使用:global(.className)的语法,声明一个全局规则。凡是这样声明的class,都不会被编译成哈希字符串。

App.css加入一个全局class

 .title {
   color: red;
 }
 
 :global(.title) {
   color: green;
 }

App.js使用普通的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;
 }