最近在使用umi进行项目开发，他内置了antd，但是antd上有的样式跟我们需要的不一致，此时就要对antd组件的样式进行修改。因为umi里面默认配置了css_module的原因，所以假如不知道怎么处理得话对一些组件就很有可能达不到自己想要的修改效果
为什么要使用css_module进行开发
因为使用css_module可以尽量的避免css全局命名的冲突，减少我们命名的难度，避免我们的代码被未知的样式影响到
怎么进行使用以及原理?
我们新建一个umi项目,在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 href="https://umijs.org/guide/getting-started.html">
Getting Started
</a>
</li>
</ul>
</div>
);
}
index.css的代码是怎么样子的内?
.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当成一个对象使用，那么这样会有什么样子的效果呢?为什么就可以避免我们的css被影响到了呢?
我们打开控制台可以看到
我们并没有找到.normal这个类
其对应的是
index__normal___YzYMc
也就是说css_module对我们的内容进行了改变，自动修改了类名，而以后都不会再出现对于的类的名称，因此我们的css也就不会被污染了。但是这样也会带来新的问题。
想要修改外部的react组件的样式带来的问题
此时我们引入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的颜色并没有修改，而我们在控制台中检测看到的对应的两个类就是 ant-select-selection ant-select-selection--single
为什么没有修改呢？
其实是因为前缀不对
我们搜索打包后的css文件可以发现一句类似这个的代码
.index__normal___HWRKS .index__select___2eBB3 .index__ant-select-selection___1d83s.index__ant-select-selection--single___3Ckd4 {
background: red;
}
所以就会导致跟我们html中的css对不上
加入我们希望进行修改，一个办法是进行全局的修改,umi提供了对应的修改的位置，但是假如我们期望的是只进行部分的修改，同时我们还需保持css_module的特性,那么我们可以使用
:global
他可以使得css_module中的类不会进行重命名
.normal .select :global .ant-select-selection.ant-select-selection--single {
background: red;
}
这样我们就可以在使用css-module的同时对部分不好进行修改的antd组件的样式进行修改了
即使你使用的是less这些也是一样的处理
.normal {
.select {
:global .ant-select-selection.ant-select-selection--single {
background: red;
}
}
}
