javascript - Antd：需要更改折叠体的背景颜色

Question

我有一个在项目中使用的样式化 Collapse 元素，然后当折叠打开时，我似乎无法覆盖实际主体的背景颜色。

我通过使用样式化组件对其进行样式化创建了一个自定义折叠。我瞄准Collapse.Panel并设置了背景颜色，但没有任何改变。

我什至创建了一个body元素并将其放置在我的折叠元素中，围绕着我的其余元素，并在其上设置背景颜色。

当背景颜色出现时，它在我的所有元素周围放置了一个框，在主体边缘和我的新背景之间仍然出现白色边距

我在这里创建了一个沙箱，以更好地表达我的意思。有什么帮助/建议吗？

标签： javascriptreactjsantd

Answer 1

尝试覆盖 css 类.ant-collapse-content检查示例：

const StyledCollapse = styled(AntCollapse.Panel)`
  &&& {
    border: none;
    border-radius: 0px;
    background-color: #f7f7f7;
    box-shadow: none;
  }
  .ant-collapse-content {
    background: palegreen;
  }
`;