React?UI組件庫之快速實(shí)現(xiàn)antd的按需引入和自定義主題
React UI組件庫
流行的開源React UI組件庫
- material-ui（國外）
- ant-design（國內(nèi)螞蟻金服）
antd的基本使用
antd 是基于 Ant Design 設(shè)計(jì)體系的 React UI 組件庫，主要用于研發(fā)企業(yè)級(jí)中后臺(tái)產(chǎn)品。
安裝antd組件庫：
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組件庫樣式：
import 'antd/dist/antd.css';
由于全部引入antd組件庫樣式，會(huì)導(dǎo)致文件太大，影響性能問題，所以應(yīng)該按需引入。
antd樣式按需引入
用到哪個(gè)組件的樣式，就引入哪個(gè)組件的樣式。參考文檔
1.安裝 react-app-rewired，customize-cra庫
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 訪問頁面，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è)綠色的按鈕就說明配置成功了。
總結(jié)
到此這篇關(guān)于React UI組件庫之快速實(shí)現(xiàn)antd的按需引入和自定義主題的文章就介紹到這了,更多相關(guān)React UI antd按需引入和自定義主題內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
React?組件權(quán)限控制的實(shí)現(xiàn)
本文主要介紹了React?組件權(quán)限控制的實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-02-02
React?Hook中的useState函數(shù)的詳細(xì)解析
Hook 就是 JavaScript 函數(shù)，這個(gè)函數(shù)可以幫助你鉤入(hook into) React State以及生命周期等特性，這篇文章主要介紹了React?Hook?useState函數(shù)的詳細(xì)解析的相關(guān)資料,需要的朋友可以參考下2022-10-10
這篇文章主要介紹了React?的數(shù)據(jù)流和生命周期,本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-08-08
react-three/postprocessing庫的參數(shù)中文含義使用解析
這篇文章主要介紹了react-three/postprocessing庫的參數(shù)中文含義使用總結(jié),本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-05-05
函數(shù)式組件的基本意義就是,組件實(shí)際上是一個(gè)函數(shù),不是類,下面這篇文章主要給大家介紹了關(guān)于React中函數(shù)組件與類的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-10-10
這篇文章主要為大家介紹了React?Streaming?SSR原理示例深入解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-12-12
React路由規(guī)則定義與聲明式導(dǎo)航及編程式導(dǎo)航分別介紹
這篇文章主要介紹了React路由規(guī)則的定義、聲明式導(dǎo)航、編程式導(dǎo)航，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)吧2022-09-09
React如何解決fetch跨域請求時(shí)session失效問題
這篇文章主要給大家介紹了關(guān)于React如何解決fetch跨域請求時(shí)session失效問題的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2018-11-11
一篇文章介紹redux、react-redux、redux-saga總結(jié)
這篇文章主要介紹了一篇文章介紹redux、react-redux、redux-saga總結(jié)，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2019-05-05
reactjs學(xué)習(xí)解決unknown at rule @tailwind css
這篇文章主要介紹了reactjs學(xué)習(xí)解決unknown at rule @tailwind css問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-02-02