第 6 章 React UI 组件库

6.1.流行的开源 React UI 组件库

6.1.1. material-ui(国外)

1. 官网: http://www.material-ui.com/#/

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

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

1. 官网: https://ant.design/index-cn

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

6.1.3 antd的按需引入+自定主题

1.安装依赖：yarn add react-app-rewired customize-cra babel-plugin-import less less-loader@6

2.修改package.json

  ....
  "scripts": {
  "start": "react-app-rewired start",
  "build": "react-app-rewired build",
  "test": "react-app-rewired test",
  "eject": "react-scripts eject"
  },
  ....
3.根目录下创建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' },
    }
   }),
  );

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