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

.tiltle {
  color:red;
}

构建工具将类名style.title编译成一个哈希字符串

<h1 class="_3zyde4l1yATCOkgn-DBWEL">Hello World</h1>

App.css也会同时被编译：

._3zyde4l1yATCOkgn-DBWEL {
  color: red;
}

这样一来 这个类名就变成独一无二了 只对APP组件有效

global

使用global声明的class 都不会被编译成哈希字符串

：global{
	.title{}
}

使用场景
我们使用的组件的样式大部分都是使用全局样式 使用局部方式声明class 经过编译后 无法与组件的默认样式class匹配 样式自然无法进行覆盖
要覆盖默认样式就需要 使用全局样式 需要使用global 声明的class
这样就不会被编译成哈希字符串 也就能覆盖默认样式了