CSS中的global

在我使用antd等组件时，常常需要更改组件的默认样式，这时候，我们就需要用:global{}将需要修改的样式包裹起来。这种情况，我遇到过很多次，但是从来没有探究过原因，今天就浅浅的说一下我的理解。
在说这个问题之前，我们需要先知道CSS Modules。
CSS Modules主要是实现局部作用域和模块依赖两个功能。我们主要了解第一个功能就好。

局部作用域

我们都知道，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编译成一个哈希字符串。

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

App.css也会同时被编译。

._3zyde4l1yATCOkgn-DBWEL {
  color: red;
}

这样一来，这个类名就变成独一无二了，只对App组件有效。
CSS Modules 提供各种插件，支持不同的构建工具。

关于global

这时候再来理解global就容易很多，我们使用的组件的样式大部分都是全局样式，使用局部方式声明class经过编译后，无法与组件的默认样式class匹配，样式自然就无法进行覆盖，要覆盖默认样式就需要使用全局样式。使用global声明的class，都不会被编译成哈希字符串也就能够进行覆盖了。

参考：
阮一峰老师的CSS Modules 用法教程