修改Ant Design默认样式的方法及遇到的问题

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

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

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

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

  <Select defaultValue="lucy" style={{width: 120, backgroundColor: 'red'}}></Select>

  在此处对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所在文件
  <Select defaultValue="lucy" style={{width: 120}} className={styles.selection}>

  实现效果如下：（因为此处我只给第一个<Select>加了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所在文件
  <Select defaultValue="lucy" style={{width: 120}} className={styles.select_test}></Select>

  此时我们会发现并不生效，（原因是：className被css loader编译成哈希字符串）解决办法：（为了统一代码和浏览器class的一致，将select的className的添加方式换了一下）

  <Select defaultValue="lucy" style={{width: 120}} className="select_test"></Select>

  问题解决，效果如下：

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

理解尚浅，望不吝赐教！