react 修改antd CheckableTag组件的.ant-tag-checkable-checked样式。 样式不生效
时间: 2023-08-08 19:04:30 浏览: 137
如果你在 `index.module.less` 样式文件中修改 `.ant-tag-checkable-checked` 的样式,可能会因为样式优先级问题导致修改不生效。这种情况下,你可以使用 `!important` 关键字来提高样式优先级,从而覆盖默认样式。示例代码如下:
```less
// index.module.less
@import "~antd/dist/antd.less"; // 引入 antd 样式文件
// 自定义样式
.ant-tag-checkable-checked {
background-color: red !important; // 修改选中状态下的背景色
}
```
在上面的代码中,我们通过 `.ant-tag-checkable-checked` 选择器选中选中状态下的 tag,并使用 `!important` 关键字来提高样式优先级。这样,我们就可以覆盖默认样式了。
需要注意的是,使用 `!important` 关键字可能会导致样式不易维护和扩展,因此建议在使用时慎重考虑。如果可能的话,可以使用更加具体的选择器或者使用 `:not()` 选择器来避免样式冲突。同时,为了避免样式冲突,建议使用 CSS 模块化来管理样式。
阅读全文