一、antd的按需引入+自定義主題
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 }
二、UI庫
1. material-ui(國外)
2. ant-design(國內螞蟻金服)