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

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;

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;

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

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

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,
    }),
  ],
};

@collapse-header-bg: #f0f0f0;