Antd:需要改变折叠体的背景颜色 [英] Antd: Need to change the background color of collapse body

问题描述

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

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

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

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

我在这里创建了一个沙盒以更好地展示我的意思.有什么帮助/建议吗?

解决方案

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

I have a styled Collapse element that I'm using in a project and I can't seem to override the background color of the actual body when then collapse opens.

I created a custom Collapse by styling it with Styled Components. I targeted the Collapse.Panel and set the background color but nothing changed.

I even created a body element and placed it inside of my collapse element around the rest of my elements and set a background color on that.

While the background color showed up, it placed a box around all of my elements with a white margin still appearing between the edge of the body and my new background

I created a Sandbox here to better show what I mean. Any help/suggestions?

解决方案

Try overriding the css class .ant-collapse-content check the example:

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

这篇关于Antd:需要改变折叠体的背景颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！