React UI组件库 antd

1️⃣ ant-design(国内蚂蚁金服)

官网：https://ant.design/index-cn
Github：https://github.com/ant-design/ant-design/
在 create-react-app 中使用： https://ant.design/docs/react/use-with-create-react-app-cn#Advanced-Guides

1️⃣ antd的按需引入

https://ant.design/docs/react/use-with-create-react-app#Advanced-Guides
1. 安装依赖：
yarn add @craco/craco
2. 修改package.json

// package.json
"scripts": {
    "start": "react-app-rewired start",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test",
    "eject": "react-scripts eject"
},

1. 根目录下创建config-overrides.js

   // 配置具体的修改规则
   const { override, fixBabelImports } = require('customize-cra');
   module.exports = override(
   fixBabelImports('import', {
     libraryName: 'antd',
     libraryDirectory: 'es',
     style: 'css',
   }),
   );

2. 备注：不用在组件里亲自引入样式了，即：import ‘antd/dist/antd.css’应该删掉

1️⃣ 自定义主题样式

安装依赖
yarn add less less-loader
配置 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, // 允许用 js 修改 antd 底层的 less
        modifyVars: { '@primary-color': 'orange' }, // 修改某个变量是什么颜色
      }
    }),
);