在我使用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
,都不会被编译成哈希字符串也就能够进行覆盖了
:global(.ant-tabs-nav){
margin-bottom: 0;
}