React UI元件庫之快速實現antd的按需引入和自定義主題

2022-07-21 14:00:31

React UI元件庫

流行的開源React UI元件庫

material-ui（國外）
ant-design（國內螞蟻金服）

antd的基本使用

antd 是基於 Ant Design 設計體系的 React UI 元件庫，主要用於研發企業級中後臺產品。

安裝antd元件庫：

npm install antd --save
yarn add antd

預設按需引入antd元件：

import { Button, DatePicker } from 'antd';

預設按需引入icons圖示：

import { WechatOutlined, SearchOutlined } from '@ant-design/icons';

預設全部引入antd元件庫樣式：

import 'antd/dist/antd.css';

由於全部引入antd元件庫樣式，會導致檔案太大，影響效能問題，所以應該按需引入。

antd樣式按需引入

用到哪個元件的樣式，就引入哪個元件的樣式。參考檔案

1.安裝 react-app-rewired，customize-cra庫

npm add react-app-rewired customize-cra

react-app-rewired：用於啟動react腳手架（因為更新了腳手架的設定，所以不能用原來的命令啟動）。

customize-cra：用於執行修改設定的命令。

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 用於修改預設設定

// 設定具體的修改規則
module.exports = function override(config, env) {
  // do stuff with the webpack config...
  return config;
};

4.安裝並使用 babel-plugin-import，它是一個用於按需載入元件程式碼和樣式的 babel 外掛。

npm add babel-plugin-import

5.修改 config-overrides.js 檔案

// 設定具體的修改規則
const { override, fixBabelImports } = require('customize-cra');

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

完成上述操作，可以移除前面在 src/App.css 裡全部新增樣式的程式碼： import 'antd/dist/antd.css'。最後重啟 npm start 存取頁面，antd 元件的 js 和 css 程式碼都會按需載入。

antd自定義主題

按照設定主題的要求，自定義主題需要用到 less 變數覆蓋功能。我們可以引入 customize-cra 中提供的 less 相關的函數 addLessLoader 來幫助載入 less 樣式，同時修改 config-overrides.js 檔案。

1.安裝less和less-loader：

npm add less@5 
npm add less-loader@5
// npm add less less-loader@5

less：想要修改less檔案需要安裝less。

less-loader：修改完之後編譯less檔案需要安裝less-loader。

2.修改config-overrides.js檔案：

// 設定具體的修改規則
const { override, fixBabelImports, addLessLoader } = require('customize-cra');

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

這裡利用了less-loader的 modifyVars 來進行主題設定，變數和其他設定方式可以參考設定主題檔案。

修改後重啟 npm start，如果看到一個綠色的按鈕就說明設定成功了。

總結

到此這篇關於React UI元件庫之快速實現antd的按需引入和自定義主題的文章就介紹到這了,更多相關React UI antd按需引入和自定義主題內容請搜尋it145.com以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援it145.com！

React UI元件庫之快速實現antd的按需引入和自定義主題

目錄