React---antd的按需引入和自定義主題

一、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

                   

const { override, fixBabelImports,addLessLoader} = require('customize-cra');  2 
module.exports = override(
  fixBabelImports('import', {
    libraryName: 'antd',
    libraryDirectory: 'es',
    style: true,
    }),
 addLessLoader({
 lessOptions:{
            javascriptEnabled: true,
            modifyVars: { '@primary-color': 'green' },
        }
    }),
);

4. antd組件庫的使用

import React, { Component } from 'react'
import { Button,DatePicker } from 'antd';
import {WechatOutlined,WeiboOutlined,SearchOutlined} from '@ant-design/icons'
const { RangePicker } = DatePicker;

export default class App extends Component {
    render() {
        return (
            <div>
                App....
                <Button type="primary">按鈕1</Button>
                <Button >按鈕2</Button>
                <Button type="link">按鈕3</Button>
                <Button type="primary" icon={<SearchOutlined />}>
                    Search
                </Button>
                <WechatOutlined />
                <WeiboOutlined />
                <DatePicker/>
                <RangePicker/>
            </div>
        )
    }
}

                4.備注：不用在組件里親自引入樣式了，即：import 'antd/dist/antd.css'應該刪掉

 二、UI庫

1. material-ui(國外)

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

2. ant-design(國內螞蟻金服)

1. 官網: https://ant.design/index-cn
2. Github: https://github.com/ant-design/ant-design/