antd切换主题

{
  "name": "my-react-app",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.3.2",
    "@testing-library/user-event": "^7.1.2",
    "antd": "^4.10.2",
    "babel-plugin-import": "^1.13.3",
    "customize-cra": "^1.0.0",
    "less": "^4.1.0",
    "less-loader": "^7.2.1",
    "react": "^16.14.0",
    "react-app-rewired": "^2.1.8",
    "react-dom": "^16.14.0",
    "react-scripts": "3.4.3"
  },
  "scripts": {
    "start": "react-app-rewired start",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

const { override, fixBabelImports, addLessLoader } = require('customize-cra');
const { getThemeVariables } = require('antd/dist/theme');

module.exports = override(
    // fixBabelImports('import', {
    //   libraryName: 'antd',
    //   libraryDirectory: 'es',
    //   //'css': 再也不需要再每个页面里面都引入“antd/dist/antd.css”
    //   //"less" || true: 暂时没发现用途, 不会自动引入antd.css或者antd.less, 不如直接注释掉
    //   style: 'css'
    // }),

    addLessLoader({
      lessOptions: {
        // modifyVars: {
        //     '@primary-color': '#1DA57A',
        //     '@font-size-base': '24px'
        // },
        modifyVars: getThemeVariables({
            dark: true, // 开启暗黑模式
            compact: true, // 开启紧凑模式
        }),
        javascriptEnabled: true,
      },
    })
)

import React from 'react';
import {
  Form,
  Select,
  InputNumber,
  DatePicker,
  Switch,
  Slider,
  Button,
  Rate,
  Typography,
  Space,
  Divider,
} from 'antd';
// import './App.less';
// import 'antd/dist/antd.css';
import 'antd/dist/antd.less';

const { Option } = Select;
const { Title } = Typography;

const App = () => (
  <>
    <section style={{ textAlign: 'center', marginTop: 48, marginBottom: 40 }}>
      <Space align="start">
        <img
          style={{width: 40, height: 40 }}
          src="https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg"
          alt="Ant Design"
        />
        <Title level={2} style={{ marginBottom: 0 }}>
          Ant Design
        </Title>
      </Space>
    </section>
    <Divider style={{ marginBottom: 60 }}>Form</Divider>
    <Form labelCol={{ span: 8 }} wrapperCol={{ span: 8 }}>
      <Form.Item label="数字输入框">
        <InputNumber min={1} max={10} defaultValue={3} />
        <span className="ant-form-text"> 台机器</span>
        <a href="https://ant.design">链接文字</a>
      </Form.Item>
      <Form.Item label="开关">
        <Switch defaultChecked />
      </Form.Item>
      <Form.Item label="滑动输入条">
        <Slider defaultValue={70} />
      </Form.Item>
      <Form.Item label="选择器">
        <Select defaultValue="lucy" style={{ width: 192 }}>
          <Option value="jack">jack</Option>
          <Option value="lucy">lucy</Option>
          <Option value="disabled" disabled>disabled</Option>
          <Option value="yiminghe">yiminghe</Option>
        </Select>
      </Form.Item>
      <Form.Item label="日期选择框">
        <DatePicker />
      </Form.Item>
      <Form.Item label="日期范围选择框">
        <DatePicker.RangePicker />
      </Form.Item>
      <Form.Item label="评分">
        <Rate defaultValue={5} />
      </Form.Item>
      <Form.Item wrapperCol={{ span: 8, offset: 8 }}>
        <Space>
          <Button type="primary" htmlType="submit">
            Submit
          </Button>
          <Button>
            Cancel
          </Button>
        </Space>
      </Form.Item>
    </Form>
  </>
);

export default App;

{

  "name": "my-react-app",

  "version": "0.1.0",

  "private": true,

  "dependencies": {

    "@testing-library/jest-dom": "^4.2.4",

    "@testing-library/react": "^9.3.2",

    "@testing-library/user-event": "^7.1.2",

    "antd": "^4.10.2",

    "babel-plugin-import": "^1.13.3",

    "customize-cra": "^1.0.0",

    "less": "^4.1.0",

    "less-loader": "^7.2.1",

    "react": "^16.14.0",

    "react-app-rewired": "^2.1.8",

    "react-dom": "^16.14.0",

    "react-scripts": "3.4.3"

  },

  "scripts": {

    "start": "react-app-rewired start",

    "build": "react-app-rewired build",

    "test": "react-app-rewired test",

    "eject": "react-scripts eject"

  },

  "eslintConfig": {

    "extends": "react-app"

  },

  "browserslist": {

    "production": [

      ">0.2%",

      "not dead",

      "not op_mini all"

    ],

    "development": [

      "last 1 chrome version",

      "last 1 firefox version",

      "last 1 safari version"

    ]

  }

}