修改Ant Design默认样式的方法及css loader将Classname编译成哈希字符串的问题

一直想研究一下AntDesign组件库的组件样式，碰巧最近在一个Umi+Ant Design+dva.js的项目中，需要配置theme和对组件样式修改，因此直接仔细的研究，并记录为本文档。本想研究明白再发文章总结，但是碍于例子不太好复现，因此每遇到一个问题，就在此记录。

---

本篇文章，以组件为例进行演示和讲解。

1.修改样式的方法及需要注意的问题

• 最简单的方法就是根据Ant Design Por官方文档API中提供的属性、Style覆盖、ClassNme等方法，对组件的样式进行修改，但是这并不能完全满足我们的需求。
  比如：

在此处对select组件的backgroudColor进行修改，但是由于Antd组件本身就有了一个属性，因此呈现效果如下：

这并不满足我们的需求，因此提供下文的一系列方法。

全局修改某一种组件的样式（#root方法）

在src/global.less文件中添加如下代码：（此处，我尝试了放到其他.less文件中结果同样可以，但是为了管理方便，建议涉及到全局修改的样式，还是在global.less文件中）

#root .ant-select-selection{//在src/global.less文件中添加
background: red;
}

呈现效果如下：

此时我们发现，两个Select选择器都变成了红色背景，可是如果我们只想改变某一个组件背景的话，我们该怎么办呢？

全局修改某一种组件的样式（：global方法）

同样，在src/global.less文件中添加如下代码：

:global  .ant-select-selection{
background: blue;
}

呈现效果如下:

样式没有改变的原因，见下图：因为原本的.ant-select-selection中已经存在background-color，同时：global的优先级又没有#root高，因此不会覆盖，解决这个问题的方法就是加上！ important；

代码如下：

:global  .ant-select-selection{
background: blue !important;
}

呈现效果如下：

但是这依然解决不了，我们只想改变某一个组件背景的问题，下面解决办法来了！

修改某一个组件的样式（避免CSS被编译为哈希字符串）

实现代码如下：

.selection{
 :global{
   .ant-select-selection{
     background-color: red !important; //设置颜色
   }
 }
}

import styles from '../../page.less'//.less文件为上文中定义.selection所在文件
实现效果如下：（因为此处我只给第一个加了className）

修改某一个组件的样式（有坑！但解决了）

注意：这种方法会存在className被css loader编译成哈希字符串的情况，但提供了解决办法
实现代码如下：

:global{//写法一
.select_test{  //给该select框加的className
  .ant-select-selection{
    background-color: red;
  }
}
}
:global(.select_test .ant-select-selection){写法二
background-color: yellow !important;
}

import styles from '../../page.less'//.less文件为上文中定义.select_test所在文件

此时我们会发现并不生效，（原因是：className被css loader编译成哈希字符串）

在 CSS Modules 中，类名被编译成哈希字符串是为了确保样式的局部性和避免全局冲突，同时它能够使样式表的维护更容易，并提供更好的模块化支持。。因此，如果您使用 styles.globalClass 这样的方式来引用全局样式，它会被编译成哈希字符串，从而导致全局样式不生效。

在上面的例子中，globalClass 是全局样式，直接使用了字符串类名，而 select_test 是局部样式，使用了 styles 对象来引用。

CSS Modules用法教程-阮一峰

解决办法：（为了统一代码和浏览器class的一致，将select的className的添加方式换了一下）

问题解决，效果如下：

参考资料：
怎么修改antd默认样式及遇到的问题
修改ant design 默认css样式
另：附上深入理解CSS选择器优先级应该会对各位所有帮助。

理解尚浅，望不吝赐教！