React?UI怎么實(shí)現(xiàn)antd的按需引入和自定義主題

今天小編給大家分享一下React UI怎么實(shí)現(xiàn)antd的按需引入和自定義主題的相關(guān)知識(shí)點(diǎn)，內(nèi)容詳細(xì)，邏輯清晰，相信大部分人都還太了解這方面的知識(shí)，所以分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后有所收獲，下面我們一起來了解一下吧。

React UI組件庫(kù)

流行的開源React UI組件庫(kù)

• material-ui（國(guó)外）

• ant-design（國(guó)內(nèi)螞蟻金服）

antd的基本使用

antd 是基于 Ant Design 設(shè)計(jì)體系的 React UI 組件庫(kù)，主要用于研發(fā)企業(yè)級(jí)中后臺(tái)產(chǎn)品。

安裝antd組件庫(kù)：

npm install antd --save
yarn add antd

默認(rèn)按需引入antd組件：

import { Button, DatePicker } from 'antd';

默認(rèn)按需引入icons圖標(biāo)：

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

默認(rèn)全部引入antd組件庫(kù)樣式：

import 'antd/dist/antd.css';

由于全部引入antd組件庫(kù)樣式，會(huì)導(dǎo)致文件太大，影響性能問題，所以應(yīng)該按需引入。

antd樣式按需引入

用到哪個(gè)組件的樣式，就引入哪個(gè)組件的樣式。參考文檔

1.安裝 react-app-rewired，customize-cra庫(kù)

npm add react-app-rewired customize-cra

react-app-rewired：用于啟動(dòng)react腳手架（因?yàn)楦铝四_手架的配置，所以不能用原來的命令啟動(dòng)）。

customize-cra：用于執(zhí)行修改配置的命令。

2.修改package.json文件

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

3.在項(xiàng)目根目錄創(chuàng)建一個(gè) config-overrides.js 用于修改默認(rèn)配置

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

4.安裝并使用 babel-plugin-import，它是一個(gè)用于按需加載組件代碼和樣式的 babel 插件。

npm add babel-plugin-import

5.修改 config-overrides.js 文件

// 配置具體的修改規(guī)則
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 訪問頁(yè)面，antd 組件的 js 和 css 代碼都會(huì)按需加載。

antd自定義主題

按照配置主題的要求，自定義主題需要用到 less 變量覆蓋功能。我們可以引入 customize-cra 中提供的 less 相關(guān)的函數(shù) addLessLoader 來幫助加載 less 樣式，同時(shí)修改 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文件：

// 配置具體的修改規(guī)則
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 來進(jìn)行主題配置，變量和其他配置方式可以參考 配置主題 文檔。

修改后重啟 npm start，如果看到一個(gè)綠色的按鈕就說明配置成功了。

以上就是“React UI怎么實(shí)現(xiàn)antd的按需引入和自定義主題”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會(huì)為大家更新不同的知識(shí)，如果還想學(xué)習(xí)更多的知識(shí)，請(qǐng)關(guān)注億速云行業(yè)資訊頻道。