最近在使用umi進(jìn)行項(xiàng)目開發(fā)，他內(nèi)置了antd，但是antd上有的樣式跟我們需要的不一致，此時(shí)就要對(duì)antd組件的樣式進(jìn)行修改。因?yàn)閡mi里面默認(rèn)配置了css_module的原因，所以假如不知道怎么處理得話對(duì)一些組件就很有可能達(dá)不到自己想要的修改效果

為什么要使用css_module進(jìn)行開發(fā)

因?yàn)槭褂胏ss_module可以盡量的避免css全局命名的沖突，減少我們命名的難度，避免我們的代碼被未知的樣式影響到

怎么進(jìn)行使用以及原理?

我們新建一個(gè)umi項(xiàng)目,在pages/index.js中可以看到以下的代碼

import styles from './index.css';

export default function() {
  return (
    <div className={styles.normal}>
      <div className={styles.welcome} />
      <ul className={styles.list}>
        <li>To get started, edit <code>src/pages/index.js</code> and save to reload.</li>
        <li>
          <a >
            Getting Started
          </a>
        </li>
      </ul>
    </div>
  );
}

index.css的代碼是怎么樣子的內(nèi)?

.normal {
  font-family: Georgia, sans-serif;
  margin-top: 4em;
  text-align: center;
}

.welcome {
  height: 512px;
  background: url(../assets/yay.jpg) no-repeat center 0;
  background-size: 512px 512px;
}

.list {
  font-size: 1.2em;
  margin: 1.8em 0 0;
  list-style: none;
  line-height: 1.5em;
}

.list code {
  background: #f7f7f7;
}

也就是說使用css_module我們可以將css當(dāng)成一個(gè)對(duì)象使用，那么這樣會(huì)有什么樣子的效果呢?為什么就可以避免我們的css被影響到了呢?
我們打開控制臺(tái)可以看到
我們并沒有找到.normal這個(gè)類
其對(duì)應(yīng)的是
index__normal___YzYMc
也就是說css_module對(duì)我們的內(nèi)容進(jìn)行了改變，自動(dòng)修改了類名，而以后都不會(huì)再出現(xiàn)對(duì)于的類的名稱，因此我們的css也就不會(huì)被污染了。但是這樣也會(huì)帶來新的問題。

想要修改外部的react組件的樣式帶來的問題

此時(shí)我們引入antd
修改jsx

import styles from './index.css';
import { Button } from 'antd';
export default function() {
  return (
    <div className={styles.normal}>
      <Button className="btn">test</Button>
    </div>
  );
}

修改css

.normal {
  font-family: Georgia, sans-serif;
  margin-top: 4em;
  text-align: center;
}

.normal .select .ant-select-selection.ant-select-selection--single {
  background: red;
}

我們可以看到select的顏色并沒有修改，而我們?cè)诳刂婆_(tái)中檢測(cè)看到的對(duì)應(yīng)的兩個(gè)類就是 ant-select-selection ant-select-selection--single
為什么沒有修改呢？
其實(shí)是因?yàn)榍熬Y不對(duì)
我們搜索打包后的css文件可以發(fā)現(xiàn)一句類似這個(gè)的代碼

.index__normal___HWRKS .index__select___2eBB3 .index__ant-select-selection___1d83s.index__ant-select-selection--single___3Ckd4 {
  background: red;
}

所以就會(huì)導(dǎo)致跟我們html中的css對(duì)不上
加入我們希望進(jìn)行修改，一個(gè)辦法是進(jìn)行全局的修改,umi提供了對(duì)應(yīng)的修改的位置，但是假如我們期望的是只進(jìn)行部分的修改，同時(shí)我們還需保持css_module的特性,那么我們可以使用
:global
他可以使得css_module中的類不會(huì)進(jìn)行重命名

.normal .select :global .ant-select-selection.ant-select-selection--single {
  background: red;
}

這樣我們就可以在使用css-module的同時(shí)對(duì)部分不好進(jìn)行修改的antd組件的樣式進(jìn)行修改了
即使你使用的是less這些也是一樣的處理

.normal {
  .select {
    :global .ant-select-selection.ant-select-selection--single {
      background: red;
    }
  }
}