React learning 22 (React UI component library)

Popular open source React UI component library

1) material-ui (foreign)

        Official website: http://www.material-ui.com/#/

        github:https://github.com/callemall/material-ui

2)ant-design (domestic)

        Official website: https://ant-design/index-cn

        github:https://github.com/ant-design/ant-design

Use of ant-design

Install: npm i antd

use:

import { Button } from 'antd'（使用什么组件，按需引入组件即可）

import 'antd/dist/antd.css' (introduce the style of the component, all the styles of the component are introduced, in order to reduce the memory size, should

The on-demand import)

The css style in the ant-design component library is imported on demand

Specific operation steps: please refer to the use in create-react-app of version 3.X on the official website

1. Installation dependencies:

npm i react-app-rewired customize-cra babel-plugin-import less less-loader

2. Modify pakage.json

 "scripts": {
    "start": "react-app-rewired start",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test",
    "eject": "react-scripts eject"

 },

3. Do not introduce styles in the component yourself, ie: import 'antd/dist/antd.css'

custom theme

Specific operation steps: please refer to the use in create-react-app of version 3.X on the official website

Create config-overrides.js in the root directory

// 配置语法规则

 const { override, fixBabelImports, addLessLoader } = require('customize-cra');
 module.exports = override(
   fixBabelImports('import', {
     libraryName: 'antd',
     libraryDirectory: 'es',
     style: true,
   }),
   addLessLoader({
     lessOptions:{
      javascriptEnabled: true,
      modifyVars: { '@primary-color': 'orange' },
     }
   }),
 );