如何修改antd的默认样式？

1，工具：VS code + Google chrome

2，React+dva+antd+less

3，具体步骤

本文主要是使用less来修改默认样式，以antd中的select选择器为例子，如图1。

图1

Select虽然看起来是个很小的组件，但是涉及到了伪类元素，要修改还是有一点困难的。首先要从浏览器入手，找到select对应的样式，一个个调试，确认出影响布局效果的样式。接下来新建一个.less文件，然后复制影响布局效果的类名（注意：某些情况不一定需要全部复制，比如树形选择器），如图3。

图3

然后再在less文件中对样式做调整，就不一一列举了，如图四。

关于:global，我们使用的组件的样式大部分都是全局样式，使用局部方式声明class经过编译后，无法与组件的默认样式class匹配，样式自然就无法进行覆盖，要覆盖默认样式就需要使用全局样式。使用global声明的class，都不会被编译成哈希字符串也就能够进行覆盖了。参考：阮一峰老师的CSS Modules 用法教程。

图4

接下来把less文件引入需要的文件中，使用import；import styles from './index.less';

最后,使用className引入到组件中，如图5，可以看到我再三个地方引入了这个样式，而且这三个都有用，为什么需要这么做呢？

当我们打开浏览器查看元素的时候会发现，antd的组件是很多个H5标签嵌套形成的，不容易确定到底是那个标签在什么位置起作用，所以给他们全部添加样式不失为一种方法，到时候可以再排除掉没用的，减少代码冗余。

图5

最最后，效果图如下：上面是默认样式，下面是修改后的样式。

效果图