最近在使用umi進(jìn)行項(xiàng)目開發(fā)知牌，他內(nèi)置了antd祈争，但是antd上有的樣式跟我們需要的不一致，此時(shí)就要對antd組件的樣式進(jìn)行修改角寸。因?yàn)閡mi里面默認(rèn)配置了css_module的原因菩混，所以假如不知道怎么處理得話對一些組件就很有可能達(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è)對象使用墨吓，那么這樣會有什么樣子的效果呢?為什么就可以避免我們的css被影響到了呢?
我們打開控制臺可以看到
我們并沒有找到.normal這個(gè)類
其對應(yīng)的是
index__normal___YzYMc
也就是說css_module對我們的內(nèi)容進(jìn)行了改變球匕，自動修改了類名纹磺，而以后都不會再出現(xiàn)對于的類的名稱，因此我們的css也就不會被污染了亮曹。但是這樣也會帶來新的問題橄杨。
想要修改外部的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的顏色并沒有修改，而我們在控制臺中檢測看到的對應(yīng)的兩個(gè)類就是 ant-select-selection ant-select-selection--single
為什么沒有修改呢照卦？
其實(shí)是因?yàn)榍熬Y不對
我們搜索打包后的css文件可以發(fā)現(xiàn)一句類似這個(gè)的代碼
.index__normal___HWRKS .index__select___2eBB3 .index__ant-select-selection___1d83s.index__ant-select-selection--single___3Ckd4 {
background: red;
}
所以就會導(dǎo)致跟我們html中的css對不上
加入我們希望進(jìn)行修改式矫，一個(gè)辦法是進(jìn)行全局的修改,umi提供了對應(yīng)的修改的位置，但是假如我們期望的是只進(jìn)行部分的修改役耕，同時(shí)我們還需保持css_module的特性,那么我們可以使用
:global
他可以使得css_module中的類不會進(jìn)行重命名
.normal .select :global .ant-select-selection.ant-select-selection--single {
background: red;
}
這樣我們就可以在使用css-module的同時(shí)對部分不好進(jìn)行修改的antd組件的樣式進(jìn)行修改了
即使你使用的是less這些也是一樣的處理
.normal {
.select {
:global .ant-select-selection.ant-select-selection--single {
background: red;
}
}
}
