样式化的组件根据没有道具的类改变样式答案

【问题标题】：styled components change style based on class without props样式化的组件根据没有道具的类改变样式
【发布时间】：2020-12-07 09:03:17
【问题描述】：

我在我的 react 项目中使用 Antd 和 Styledcomponents。我有一组复选框，我想更改 checked 复选框的样式。有什么办法可以在不传递道具的情况下做到这一点？只需给出类名？

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

上面的代码试过了，还是不行。我错过了什么还是我做错了什么？有人可以解释如何解决这个问题吗？ TIA

【问题讨论】：

标签： reactjs antd styled-components

【解决方案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;
 }`

【讨论】：

谢谢不知道有什么区别。现在可以了。