修改Ant Design 组件默认样式

修改Ant Design 组件默认样式：

参考文章1
参考文章2
参考文章3

了解 CSS Modules 的基本原理：

如果给一个元素设置类名：

import styles from './example.less';
<div className={styles.title}>title</div>

CSS Modules 的基本原理很简单，就是对每个类名（非 :global 声明的）按照一定规则进行转换，保证它的唯一性。如果在浏览器里查看这个示例的 dom 结构，你会发现实际渲染出来是这样的：

<div class="title___3TqAx">title</div>

example.less文件

.title{
	width:200px;
}

以上内容经过CSS Modules编译后，在浏览器中显示为：

<div class="title___3TqAx">title</div>
.title___3TqAx{
	width:200px;
}

CSS Modules 允许使用:global(.className)的语法，声明一个全局规则。凡是这样声明的class，都不会被编译成哈希字符串。

当:global需要包含一个类名时，定义如下：

:global(.title){
	width:200px;
}

当:global需要包含多个类名时，定义如下：

:global{
    .title{
        
    }
    .head{
        
    }
}

将:global包含的类名赋值给元素

由于被global:包含，类名未被CSS Modules编译加上哈希值，所以这里类名直接以字符串的形式给出

import  './example.less';
<div className='title'>title</div>

以上内容经过CSS Modules编译后，在浏览器中显示为：

<div class="title">title</div>
.title{
	witdh:200px;
}

如何局部修改Ant Design 组件默认样式：

1、给组件设置一个ClassName

2、书写context.less文件

浏览器中组件的html结构如下：

补充：关于为什么在属性定义中加上了!important

有时候更改了组件默认样式后发现样式并不生效，查看浏览器，修改的属性并未覆盖原本属性

原因是所修改属性的权重低于默认属性，选择器的权重是可以随着选择器的嵌套累加的

参考博文

所以在属性后加上!important使得修改属性权重高于默认属性即可。