css中关于global的理解

开发过程中难免会使用到antdD、elementUI等组件库，当我们要需要修改组件的默认样式时，就需要使用到:global{}将需要修改的class名包裹起来，就可以到到修改的目的。

CSS Module

首先我们要知道：CSS的规则是全局的，任何一个组件的样式规则，都对整个页面有效。这样就会产生样式的冲突，造成污染。简单的来说，我们只要保证类名都不一样就可以了

可以尽量把类名写的复杂点
可以尽量把类名写的长一点
也可以在外层加上父级的选择器从而达到降低冲突的概率，但是保不齐哪一位同事就正好写的类名跟你一样（心态崩）。而CSS Module会产生一个独一无二的类名，在原来类名基础上拼接一个哈希串，这就是我们想要得到的独一无二的类名。

demo文件的root类名最终结果：

class="root___1GhXv"

CSS Module的做法产生的就是一个独一无二、不重复的类名

开发过程中，一般都会定义全局的共通式样，CSS Module允许使用:global(.className)的语法，声明一个全局规则，则不会被编译成哈希字符串；如引入的组件库组件。

:global {
  .class1 {
    需要添加修改的属性1:属性值1;
    需要添加修改的属性2:属性值2;
  }
  .class2 {
    需要添加修改的属性3:属性值4;
  }
}

class1、class2需要打开F12调试，到审查元素的界面，找到对应的类名（尽量直接copy），在对应class中直接添加或重写的css属性，即可到达效果。