React?UI組件庫(kù)之快速實(shí)現(xiàn)antd的按需引入和自定義主題
React UI組件庫(kù)
流行的開(kāi)源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)致文件太大,影響性能問(wèn)題,所以應(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)楦铝四_手架的配置,所以不能用原來(lái)的命令啟動(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
訪問(wèn)頁(yè)面,antd 組件的 js 和 css 代碼都會(huì)按需加載。
antd自定義主題
按照配置主題的要求,自定義主題需要用到 less 變量覆蓋功能。我們可以引入 customize-cra 中提供的 less 相關(guān)的函數(shù) addLessLoader 來(lái)幫助加載 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
來(lái)進(jìn)行主題配置,變量和其他配置方式可以參考 配置主題 文檔。
修改后重啟 npm start
,如果看到一個(gè)綠色的按鈕就說(shuō)明配置成功了。
總結(jié)
到此這篇關(guān)于React UI組件庫(kù)之快速實(shí)現(xiàn)antd的按需引入和自定義主題的文章就介紹到這了,更多相關(guān)React UI antd按需引入和自定義主題內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
- React實(shí)現(xiàn)antdM的級(jí)聯(lián)菜單實(shí)例
- react+antd實(shí)現(xiàn)動(dòng)態(tài)編輯表格數(shù)據(jù)
- React-RouterV6+AntdV4實(shí)現(xiàn)Menu菜單路由跳轉(zhuǎn)的方法
- react最流行的生態(tài)替代antdpro搭建輕量級(jí)后臺(tái)管理
- react中使用antd及immutable示例詳解
- 關(guān)于react+antd樣式不生效問(wèn)題的解決方式
- React實(shí)現(xiàn)基于Antd密碼強(qiáng)度校驗(yàn)組件示例詳解
相關(guān)文章
React?組件權(quán)限控制的實(shí)現(xiàn)
本文主要介紹了React?組件權(quán)限控制的實(shí)現(xiàn),文中通過(guò)示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-02-02React?Hook中的useState函數(shù)的詳細(xì)解析
Hook 就是 JavaScript 函數(shù),這個(gè)函數(shù)可以幫助你鉤入(hook into) React State以及生命周期等特性,這篇文章主要介紹了React?Hook?useState函數(shù)的詳細(xì)解析的相關(guān)資料,需要的朋友可以參考下2022-10-10react-three/postprocessing庫(kù)的參數(shù)中文含義使用解析
這篇文章主要介紹了react-three/postprocessing庫(kù)的參數(shù)中文含義使用總結(jié),本文給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2022-05-05React函數(shù)組件與類(lèi)的區(qū)別有哪些
函數(shù)式組件的基本意義就是,組件實(shí)際上是一個(gè)函數(shù),不是類(lèi),下面這篇文章主要給大家介紹了關(guān)于React中函數(shù)組件與類(lèi)的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-10-10React路由規(guī)則定義與聲明式導(dǎo)航及編程式導(dǎo)航分別介紹
這篇文章主要介紹了React路由規(guī)則的定義、聲明式導(dǎo)航、編程式導(dǎo)航,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)吧2022-09-09React如何解決fetch跨域請(qǐng)求時(shí)session失效問(wèn)題
這篇文章主要給大家介紹了關(guān)于React如何解決fetch跨域請(qǐng)求時(shí)session失效問(wèn)題的相關(guān)資料,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2018-11-11一篇文章介紹redux、react-redux、redux-saga總結(jié)
這篇文章主要介紹了一篇文章介紹redux、react-redux、redux-saga總結(jié),小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-05-05reactjs學(xué)習(xí)解決unknown at rule @tailwind css
這篇文章主要介紹了reactjs學(xué)習(xí)解決unknown at rule @tailwind css問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-02-02