react實現antd線上主題動態(tài)切換功能
框架選擇： create-react-app + mobx + webpack5 + antdesign
說明
- 由于最近公司有多個主題的共存性，所以需要實現線上主題切換的功能，所以本文主要描述的是基于create-react-app之上的主題切換。
- CSS切換 有考慮過根據用戶選擇的主題在切換的時候選擇加載頁面css文件的區(qū)分方案，但是考慮到這種形式需要在頁面切換的時候去reload，因為htmlDOM是在css與JS的結合產物，用戶體驗不是很好。
- Less切換 單純引入所有的less文件去做切換，這樣不能實現css的動態(tài)加載了，會增加無用css文件的加載
- 最后通過比較及查詢，獲取到第三方插件：antd-theme-generator
- 功能實現原則：使用 less 的 modifyVars 完成 antd 的主題變量替換。
安裝
antd-theme-generator
缺點： 需要配合 LESS v2.7.x 使用，不兼容IE。
cnpm install antd-theme-generator -S
添加主題切換文件 color.js
根目錄下添加文件 color.js ，添加配置內容：
const path = require('path');
const { generateTheme, } = require('antd-theme-generator');
const options = {
stylesDir: path.join(__dirname, './src/css'),
antDir: path.join(__dirname, './node_modules/antd'),
varFile: path.join(__dirname, './src/css/variables.less'),
mainLessFile: path.join(__dirname, './src/css/index.less'),
themeVariables: [ //需要動態(tài)切換的主題變量
'@primary-color',
'@secondary-color',
'@text-color',
'@text-color-secondary',
'@heading-color',
'@layout-body-background'
],
indexFileName: 'index.html',
outputFilePath: path.join(__dirname, './public/color.less'), //頁面引入的主題變量文件
}
generateTheme(options).then(less => {
console.log('Theme generated successfully');
})
.catch(error => {
console.log('Error', error);
});
CSS 文件下添加less文件
添加 variables.less 文件：
@import "~antd/lib/style/themes/default.less"; //引入antd的變量文件，實現變量的覆蓋 @primary-color: #1DA57A; @link-color: #1DA57A; @btn-primary-bg:#1DA57A;
HTML文件中加入全局less配置
index.html 中加入全局 less 變量配置，從而使 less 的 modifyVars 方法可以全局使用，切換主題時覆蓋 default.less 中的變量：
<!-- 使用自動生成的color.less，主要路徑與index.html文件同級 -->
<link rel="stylesheet/less" type="text/css" href="%PUBLIC_URL%/color.less" rel="external nofollow" />
<script>
window.less = {
async: false,
env: 'production'
};
</script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/less.js/2.7.2/less.min.js"></script>
項目啟動處修改
修改項目運行配置 package.json ，項目運行的同時完成頁面color文件的配置
"scripts": {
"start": "node color && node scripts/start.js",
"build": "node color && node scripts/build.js",
"test": " node color && node scripts/test.js"
},
頁面調用方法切換主題
頁面點擊主題切換配置，這樣寫的緣故是因為我配置的變量不同：
window.less.modifyVars(
{
'@primary-color': '#aaa',
'@menu-dark-item-active-bg':'#aaa',
'@link-color': '#aaa',
'@text-color':'#aaa',
'@btn-primary-bg': '#aaa',
}
)
.then(() => {
message.success('主題切換成功')
})
.catch(error => {
message.error(`主題切換失敗`);
console.log(error)
});
由于之后的配置中新增的樣式需要遵循主題配置的可以選擇使用統一變量，所以變量設置的時候，可以添加 var(--PC) 的全局變量設置
總結
以上所述是小編給大家介紹的react實現antd線上主題動態(tài)切換功能,希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網站的支持！
如果你覺得本文對你有幫助，歡迎轉載，煩請注明出處，謝謝！
相關文章
這篇文章主要為大家介紹了Input標簽的自動拼寫檢查功能去除實現示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-07-07
React?提供了許多常用的?Hooks，用于在函數組件中添加狀態(tài)管理、副作用處理和其他功能，本文主要介紹了其中幾個常用的，需要的可以收藏一下2023-07-07
在?React?Native?中使用?CSS?Modules的配置方法
有些前端工程師希望也能像開發(fā) web 應用那樣，使用 CSS Modules 來開發(fā) React Native，本文將介紹如何在 React Native 中使用 CSS Modules，需要的朋友可以參考下2022-08-08
react使用css module無法重寫bootstrap樣式問題及解決
這篇文章主要介紹了react使用css module無法重寫bootstrap樣式問題及解決方案,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-11-11
本文主要介紹了React組件化條件渲染的實現,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2024-12-12
React-Native中禁用Navigator手勢返回的示例代碼
本篇文章主要介紹了React-Native中禁用Navigator手勢返回的示例代碼，具有一定的參考價值，有興趣的可以了解一下2017-09-09
React應用中的路由鑒權是確保用戶僅能訪問其授權頁面的方式,用于已登錄或具有訪問特定頁面所需的權限,這篇文章就來記錄下React實現路由鑒權的流程,需要的朋友可以參考下2024-07-07
React useImperativeHandle處理組件狀態(tài)和生命周期用法詳解
React Hooks 為我們提供了一種全新的方式來處理組件的狀態(tài)和生命周期,useImperativeHandle是一個相對較少被提及的Hook,但在某些場景下,它是非常有用的,本文將深討useImperativeHandle的用法,并通過實例來加深理解2023-09-09
本篇文章主要介紹了基于webpack4搭建的react項目框架的方法，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-06-06