Antd:需要更改收拢主体的背景颜色

Ant Design（简称Antd）是一个企业级UI设计语言和React UI库，提供了丰富的组件来帮助开发者快速构建应用。如果你需要更改Antd中折叠面板（Collapse）组件的背景颜色，可以通过以下几种方式实现：

1. 内联样式

你可以直接在<Collapse>组件上使用内联样式来更改背景颜色。

import React from 'react';
import { Collapse } from 'antd';

const { Panel } = Collapse;

function App() {
  return (
    <Collapse style={{ backgroundColor: '#f0f0f0' }}>
      <Panel header="Panel 1" key="1">
        <p>Panel 1 content</p>
      </Panel>
      <Panel header="Panel 2" key="2">
        <p>Panel 2 content</p>
      </Panel>
    </Collapse>
  );
}

export default App;

2. CSS样式

你也可以通过CSS来更改背景颜色。首先，在你的组件文件中引入一个CSS文件，然后在CSS文件中定义样式。

import React from 'react';
import { Collapse } from 'antd';
import './App.css';

const { Panel } = Collapse;

function App() {
  return (
    <Collapse className="collapse-background">
      <Panel header="Panel 1" key="1">
        <p>Panel 1 content</p>
      </Panel>
      <Panel header="Panel 2" key="2">
        <p>Panel 2 content</p>
      </Panel>
    </Collapse>
  );
}

export default App;

然后在App.css文件中定义样式：

.collapse-background .ant-collapse-content {
  background-color: #f0f0f0;
}

3. 使用Antd的主题定制

Antd支持通过修改主题变量来定制样式。你可以使用antd-theme-webpack-plugin插件来实现这一点。

首先，安装插件：

npm install antd-theme-webpack-plugin --save-dev

然后在你的webpack.config.js文件中配置插件：

const AntDesignThemePlugin = require('antd-theme-webpack-plugin');

module.exports = {
  // 其他配置...
  plugins: [
    new AntDesignThemePlugin({
      antDir: path.join(__dirname, './node_modules/antd'),
      stylesDir: path.join(__dirname, './src'),
      varFile: path.join(__dirname, './src/styles/variables.less'),
      themeVariables: ['@collapse-header-bg'],
      indexFileName: 'index.html',
      generateOnce: false,
    }),
  ],
};

在src/styles/variables.less文件中定义你的主题变量：