React学习（8）UI组件库

目录隐藏

1 material-ui(国外)

2 ant-design(蚂蚁金服)

material-ui(国外)

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

ant-design(蚂蚁金服)

1)PC官网: https://ant.design/index-cn
2)移动官网: https://mobile.ant.design/index-cn
3)Github: https://github.com/ant-design/ant-design/
4)Github: https://github.com/ant-design/ant-design-mobile/

ant-design使用入门

引入antd

参考文档:
https://ant.design/docs/react/use-with-create-react-app-cn

下载组件库包

yarn add antd

实现组件的按需打包

1)下载依赖模块

yarn add react-app-rewired customize-cra babel-plugin-import

2)在全局定义加载配置的js模块: config-overrides.js

const {override, fixBabelImports} = require('customize-cra');

module.exports = override(
  fixBabelImports('import', {
    libraryName: 'antd',
    libraryDirectory: 'es',
    style: 'css',
  }),
);

修改配置: package.json

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

在应用中使用antd组件

import React, {Component} from 'react'
import {Button, message} from 'antd'
/*
应用根组件
 */
class App extends Component {

  handleClick = () => {
    message.success('成功啦...');
  }

  render() {
    return (
      <Button type='primary' onClick={this.handleClick}>学习</Button>
    )
  }
}

export default App

自定义antd主题

需求:
使antd的默认基本颜色从Blue变为Green
下载工具包:

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,
            modifyVars: {'@primary-color': '#1DA57A'},
        },
    }),
);