关于react项⽬中AntDesign组件样式覆盖不了的问题
在⽤react + Ant Design开发项⽬的时，有时我们有⾃⼰的⼀套UI，这套UI⼜与原本的Ant Design⾥的组件样式冲突，⽽为了实现我们⾃⼰的样式，可做如下处理：
1. 新增class
<Button type="primary">提交</Button>
<!-- 覆盖⽅法 -->
<Button type="primary" class="btn-class">提交</Button>
.btn-class {
...
... !important
}
若⽆法覆盖，可在样式后⾯增加 !important
2. ⾏内样式
<Button type="primary">提交</Button>
<!-- 覆盖⽅法 -->
<Button type="primary" style={{...}}>提交</Button>
3. 正则匹配（推荐）
若项⽬中已经存在了style属性和class属性，还有⼀些样式需要覆盖antd组件的样式，那么可以使⽤css属性选择器和正则进⾏联合使⽤。⾸先到antd button组件的原⽣样式名（以Button组件为例，它的样式名为：ant-btn ant-btn-primary），然后再选择下⾯⽅式之⼀进⾏操作：
<Button type="primary">提交</Button>
/* 字符串开始位置匹配 */
cssclass属性button[class^="ant-btn-primary"] {
...
}
/* 字符串任意位置匹配 */
button[class*="ant-btn-primary"] {
...
}
/* 字符串结束位置匹配 */
button[class$="ant-btn-primary"] {
...
}

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。