React框架UI组件库

郭顺发2023-06-282025-03-13

1. material-ui(国外)

官网: http://www.material-ui.com/#/
github: https://github.com/callemall/material-ui

2. ant-design(国内蚂蚁金服)

官网: https://ant.design/index-cn
Github: https://github.com/ant-design/ant-design/

2.1. antd的按需引入+自定主题

安装依赖：yarn add react-app-rewired customize-cra babel-plugin-import less less-loader
修改package.json

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

根目录下创建config-overrides.js

//配置具体的修改规则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' },    }
  }),);