Question

我在 react 项目中使用了 Antd 和 Styledcomponents 。我有一组复选框，并且想要更改已选中复选框的样式。我有什么办法可以不通过道具呢？只是给班级名字？

const StyledCheckBox = styled(Checkbox)`
 width: 90%;
 padding: 5px 5px 5px 10px;
 border: 1px solid #d5d5d5;
 .ant-checkbox-wrapper-checked{
   background: #bee7ff;
 }`

尝试了上面的代码，它不起作用。我错过了什么还是做错了吗？有人可以解释如何解决吗？ TIA

Answer 1

.ant-checkbox-wrapper-checked{}样式的书写方式将应用于StyledCheckBox内部内部的元素。如果应该是相同的元素，则应这样写（注意&）：

const StyledCheckBox = styled(Checkbox)`
 width: 90%;
 padding: 5px 5px 5px 10px;
 border: 1px solid #d5d5d5;
 &.ant-checkbox-wrapper-checked{
   background: #bee7ff;
 }`

样式化的组件根据没有道具的类更改样式

1 个答案: