使用了css-loader中的css modules来打包代码,想要直接在css中修改antd中的样式但是类名会被加上hash值,应用不到antd的样式上,另外antd的类名不经css-modules改变(配置)。
我要修改的是antd中的样式,用自己的样式覆盖默认的样式,比如modal中的背景颜色。使用:global来修改:
:global{
.ant-modal-content{
background-color: transparent;
}
}
但是这样会将所有的模态框中的content都设为透明的,而我只想要单独设置这一个模态框的样式而已,所以我们可以在这个类的上层再加一层用于识别(跟我们css权重应用一样的道理)。
:global{
.tableBottomPop{
.ant-modal-content{
background-color: transparent;
}
}
}
加样式:
<Modal
className="tableBottomPop"
title="Modal"
centered
visible={visible}
footer={null}
header = {null}
mask={false}
okText="确认"
cancelText="取消"
>
</Modal>
这里可以看到我们加了一个tableBottomPop的类,这个自己定义的类名需要在你想要覆盖那个类名的上层,例如:在这里我想要覆盖modal组件中ant-modal-content这个类名的样式,而这个类名在modal中嵌套了多层,所以可以直接在他的祖先节点上加上自定义的类名即可。
这个类名仅用于加权重识别的,所以不能在里面像css modules那样应用样式,而是直接写:className="tableBottomPop"而不是className={S.tableBottomPop}否则样式不能应用。
好了,现在就可以看到antd的组件样式已经被自己的样式覆盖了。