React学习22（React UI组件库）

流行的开源React UI组件库

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

ant-design的使用

安装：npm i antd

使用：

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

import 'antd/dist/antd.css'（引入组件的样式，引入的是组件的所有样式，为了减小内存大小， 应

该按需引入）

ant-design组件库中css样式按需引入

具体操作步骤：可参考官网中3.X版本的在create-react-app中使用

1.安装依赖：

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

2.修改pakage.json

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

 },

3.不要在组件里亲自引入样式了，即：import 'antd/dist/antd.css'

自定义主题

具体操作步骤：可参考官网中3.X版本的在create-react-app中使用

在根目录下创建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': 'orange' },
     }
   }),
 );