更改折叠面板内容背景颜色答案

【问题标题】：Change collapse panel content background color更改折叠面板内容背景颜色
【发布时间】：2021-12-13 11:03:11
【问题描述】：

我在这里使用来自ant design、link 的collapse 组件。如何更改面板的背景颜色？我只更改了panel header 的颜色，但没有更改扩展内容。这是我项目中的image 到我的collapse。

// jsx
<Collapse className={styles.collapseStyle} expandIconPosition="right"></Collapse>

//css
.collapseStyle {
  background-color: #2f313583;
  .ant-collapse-content {
    background: #2f313583;
  }
}

【问题讨论】：

标签： html css reactjs antd collapse

【解决方案1】：

您可以将className 发送给 Panel。并为该类赋予背景颜色

例如：

// JSX

<Collapse className={styles.collapseStyle} expandIconPosition="right">
    <Panel header="Header 1" key="1" className="custom-panel">
       <p>{text}</p>
    </Panel>
</Collapse>

// CSS

.custom-panel { background-color: #808080 }

【讨论】：