React UI component library

1 Popular open source React UI component library

1 material-ui(foreign)

1. 官网: Material UI: React components based on Material Design

2. github: GitHub - mui/material-ui: MUI Core: Ready-to-use foundational React components, free forever. It includes Material UI, which implements Google's Material Design.

2 ant-design (domestic Ant Financial)

1. Official website: Ant Design - an enterprise-level UI design language and React component library

2. Github: ​​​​​​​GitHub - ant-design/ant-design: An enterprise-class UI design language and React UI library

Install:

npm add antd

2 On-demand introduction of antd + custom theme

1. Install dependencies: npm add react-app-rewired customize-cra babel-plugin-import less less-loader

2. Modify package.json

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

3. Create config-overrides.js in the root directory

//Configure specific modification rules
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': 'green' },
                }
        }),
);

4. Note: There is no need to introduce styles in the component yourself, that is: import 'antd/dist/antd.css' should be deleted

5. After this, I get an error when npm start starts. Solution: add config-overrides-path settings in package.json

The error is reported as follows:

"name": "react_staging",
"version": "0.1.0",
"private": true,
"config-overrides-path": "node_modules/react-app-rewired/config-overrides.js",

Finally npm start started successfully