更改折疊面板內容背景顏色

Question

我正在使用來自ant design collapse組件，鏈接在這里。 如何更改面板的背景顏色？ 我只設法改變了panel header的顏色，而不是擴展的內容。 這是我在我的項目中collapse的圖像。

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

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

Answer 1

您可以將className賦予 Panel。 並為該班級提供背景顏色

例如：

// HTML

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