{

  "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;