使用antd,想要修改默认的样式,一直无法生效??
1、添加类名或者样式style
直接在相应组件上添加想要的样式相应的属性style,但是这种方式经常不会生效。
2、使用:global{}属性覆盖默认的属性
(1)前提:学会如何正确的找到组件的样式选择器
(可以使用Chrome控制台)
比如我这里想要将上传按钮的边框改成圆角(border-radius),选中button元素,然后在右边的样式表中先测试一下能不能生效,这里是生效了,那么说明改这个类选择器的样式是可以的。这个时候可以直接在相应组件中添加相应的style属性,但是如果还是不生效,可以考虑一下
注意:有时候如果不生效的话试试!important
(2)找到相应的位置,并且确定是可以修改的话,可以使用global属性去全局的修改样式,但是如果不是在改页面中全部的按钮都是要求的样式的的话,那么就需要对这个按钮上一级的也带进来作为对指定按钮的限制。
:global {
.antd-btn {
border-radius: 5px;
}
}
(3)比如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>
这样子,指定的组件样式就可以生效了。