react的CSS中 :global的含义
一、局部作用域
css的规则都是全局的，任何一个组件的样式规则，都对整个页面有效。产生局部作用域的唯一方法，就是使用一个独一无二的class的名字，不会与其他选择器重名，但是当我们与其他人共同开发的时候，无法保证一定与其他人不同，这时候就要用到css modules。
下面是一个React组件App.js：
import React from ‘react‘; import style from ‘./App.css‘; export default () => { return ( <h1 className={style.title}> Hello World h1> ); };
上面代码中，我们将样式文件App.css输入到style对象，然后引用style.title代表一个class：
.title { color: red; }
构建工具会将类名style.title编译成一个哈希字符串：
Hello World
App.css也会同时被编译：
._3zyde4l1yATCOkgn-DBWEL { color: red; }
这样一来，这个类名就变成独一无二了，只对App组件有效。
二、global
使用global声明的class，都不会被编译成哈希字符串。
:global { .title{ } }
三、使用场景
我们使用的组件的样式大部分都是全局样式，使用局部方式声明class经过编译后，无法与组件的默认样式class匹配，样式自然就无法进行覆盖。
要覆盖默认样式就需要使用全局样式，需要使用global声明的class。这样就不会被编译成哈希字符串也就能够覆盖默认样式了。
原文：https://www.cnblogs.com/gg-qq/p/14800750.html