怎么修改antd默认样式及遇到的问题

怎么修改antd默认样式及遇到的问题

今天分享一个最近遇到的算一个坑的问题吧，就是修改antd默认样式的问题。

事例
比如说给使用了antd的select框加一个背景颜色，代码如下：

import styles from './index.less'; //导入css文件

  <Select className = {styles.select}>
    ...
  </Select>

显示内容只有一个简单的select框：

想让它加个背景色，但是给class select加样式它是没有反应的，你可以看一下页面上的class，发现它嵌套了好几层：

并且颜色设置是在这个class下：

所以就需要修改antd自带的样式

修改antd默认样式
首先想到的肯定是使用:global来修改，即:

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

你会发现加上了颜色

但是这样就好了吗，并不是，因为你会发现这样一改之后整个项目所有的select框都变成了这个颜色，但是你并不希望是这样的，所以就想给这个select加一个className，然后只修改这个className下的样式，那么就在css代码中给它加了一个class：

       .selectOne {
            :global{
                .ant-select-selection{
                    background-color: #171D38;
                }
            }
        }

但是这样一加，你会发现这个样式并没有加上，找了半天，才发现问题所在，先猜一下是什么原因造成的

问题问题问题：
刚开始的时候并没有get到原因，总觉得好着吖，为啥就是不显示呢，后来仔细看页面如下：

看着自己加的className被css loader编译成哈希字符串了，平时也是这么加的，也没有什么问题，就试着朝这个方向想了一下，会不会是因为在:global下它不会被编译呢，然后就找到了阮老师的CSS Modules 用法教程，发现这个想法是对的

所以，为了统一代码和浏览器class的一致，将select的className的添加方式换了一下：

  <Select className = "selectOne ">
    ...
  </Select>

直接这样加是不会被编译的，然后你就可以为所欲为啦！！！

转载:https://www.jianshu.com/p/b8d45314a495