始终想钻研一下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组件自身就有了一个属性，因而出现成果如下：

    这并不满足咱们的需要，因而提供下文的一系列办法。

  • 全局批改某一种组件的款式
    在src/global.less文件中增加如下代码：（此处，我尝试了放到其余.less文件中后果同样能够，然而为了治理不便，倡议波及到全局批改的款式，还是在global.less文件中）

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

    出现成果如下：

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

  • 全局批改某一种组件的款式（办法2）
    同样，在src/global.less文件中增加如下代码：

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

    出现成果如下:

    款式没有扭转的起因，见下图：因为本来的.ant-select-selection中曾经存在background-color，同时：global的优先级又没有#root高，因而不会笼罩，解决这个问题的办法就是加上！ important；

    代码如下：

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

    出现成果如下：

    然而这仍然解决不了，咱们只想扭转某一个组件背景的问题，上面解决办法来了！

  • 批改某一个组件的款式（办法一）

    实现代码如下：

    .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;    }  }}
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款式

了解尚浅，望不吝赐教！