Antd: Need to change the background color of collapse body

user_5257353 0
Viewed 2237

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?

Edit Q-56776002-Wrong-Import

antd reactjs javascript
1 Answers

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;
  }
`;

Edit Q-56840430-BackgroundPanel

user_78824700
Related