一、antd的按需引入+自定义主题
1.安装依赖：npm install react-app-rewired customize-cra babel-plugin-import less less-loader antd 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 1 const { override, fixBabelImports,addLessLoader} = require('customize-cra');
2
3 module.exports = override(
4 fixBabelImports('import', {
5 libraryName: 'antd',
6 libraryDirectory: 'es',
7 style: true,
8 }),
9 addLessLoader({
10 lessOptions:{
11 javascriptEnabled: true,
12 modifyVars: { '@primary-color': 'green' },
13 }
14 }),
15 );
4. antd组件库的使用
1 import React, { Component } from 'react'
2 import { Button,DatePicker } from 'antd';
3 import {WechatOutlined,WeiboOutlined,SearchOutlined} from '@ant-design/icons'
4 const { RangePicker } = DatePicker;
5
6 export default class App extends Component {
7 render() {
8 return (
9 <div>
10 App....
12 <Button type="primary">按钮1</Button>
13 <Button >按钮2</Button>
14 <Button type="link">按钮3</Button>
15 <Button type="primary" icon={<SearchOutlined />}>
16 Search
17 </Button>
18 <WechatOutlined />
19 <WeiboOutlined />
20 <DatePicker/>
21 <RangePicker/>
22 </div>
23 )
24 }
25 }
4.备注：不用在组件里亲自引入样式了，即：import 'antd/dist/antd.css'应该删掉
二、UI库
1. material-ui(国外)
2. ant-design(国内蚂蚁金服)