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"

    ]

  }

}