要更改Antd折叠面板内容的背景颜色,可以通过自定义样式来实现。以下是一种解决方法的代码示例:
import React from "react";
import { Collapse } from "antd";
const { Panel } = Collapse;
const customPanelStyle = {
background: "#f7f7f7", // 设置折叠面板内容的背景颜色
borderRadius: 4,
marginBottom: 24,
border: 0,
overflow: "hidden"
};
const App = () => {
return (
面板内容1
面板内容2
{/* 添加更多的面板 */}
);
};
export default App;
在上面的代码中,我们首先定义了一个名为customPanelStyle
的自定义样式对象,其中background
属性用于设置折叠面板内容的背景颜色。
然后,我们在Panel
组件上使用style
属性将自定义样式应用于每个折叠面板。你可以根据需要自定义header
和key
属性。
这样,折叠面板的内容背景颜色就会根据customPanelStyle
中的设置进行更改。