如果你在 `
style.questionTemplate`
样式文件中
修改 `.
ant-tag-checkable-checked` 的
样式，可能会因为
样式优先级问题导致
修改不
生效。这种情况下，你可以使用后代选择器或者子选择器来提高
样式优先级。
下面是
一个简单的示例，展示如何使用后代选择器来
修改 `CheckableTag` 组件的
样式：
```less
/*
style.questionTemplate */
@import "~
antd/dist/
antd.less"; // 引入
antd 样式文件
/* 自定义
样式 */
.questionTemplate {
.
ant-tag-checkable-checked {
background-color: red; //
修改选中状态下的背景色
}
}
```
在上面的代码中，我们首先引入了
Ant Design 的
样式文件。然后，我们定义了
一个 `.questionTemplate`
样式类，用于包装 `CheckableTag` 组件。
在 `.questionTemplate`
样式类中，我们使用 `.
ant-tag-checkable-checked` 选择器来选中选中状态下的 tag，并
修改其背景色。
最后，我们将 `.questionTemplate`
样式类应用到包装 `CheckableTag` 组件的 div 上即可：
```jsx
import { CheckableTag } from '
antd';
import
style from './
style.questionTemplate.less';
function MyComponent() {
return (
<div
className={
style.questionTemplate}>
<CheckableTag checked>1</CheckableTag>
</div>
);
}
```
在上面的代码中，我们使用 `
className` 属性将 `.questionTemplate`
样式类应用到包装 `CheckableTag` 组件的 div 上，从而
修改其
样式。
需要注意的是，为了确保
样式生效，我们需要使用 `less-loader` 或者 `css-loader` 中的 `modules` 选项来启用 CSS 模块化。同时，为了避免
样式冲突，建议使用类似于 `
style.questionTemplate` 的方式来引用
样式。
扫一扫
1048
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
