react實(shí)現(xiàn)antd線上主題動(dòng)態(tài)切換功能

更新時(shí)間：2019年08月12日 10:30:45 作者：張小汪

這篇文章主要介紹了react實(shí)現(xiàn)antd線上主題動(dòng)態(tài)切換功能,本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下

demo

框架選擇： create-react-app + mobx + webpack5 + antdesign

說(shuō)明

由于最近公司有多個(gè)主題的共存性，所以需要實(shí)現(xiàn)線上主題切換的功能，所以本文主要描述的是基于create-react-app之上的主題切換。
CSS切換有考慮過(guò)根據(jù)用戶選擇的主題在切換的時(shí)候選擇加載頁(yè)面css文件的區(qū)分方案，但是考慮到這種形式需要在頁(yè)面切換的時(shí)候去reload，因?yàn)閔tmlDOM是在css與JS的結(jié)合產(chǎn)物，用戶體驗(yàn)不是很好。
Less切換單純引入所有的less文件去做切換，這樣不能實(shí)現(xiàn)css的動(dòng)態(tài)加載了，會(huì)增加無(wú)用css文件的加載
最后通過(guò)比較及查詢，獲取到第三方插件：antd-theme-generator
功能實(shí)現(xiàn)原則：使用 less 的 modifyVars 完成 antd 的主題變量替換。

安裝

antd-theme-generator

缺點(diǎn)：需要配合 LESS v2.7.x 使用，不兼容IE。

cnpm install antd-theme-generator -S

添加主題切換文件 color.js

根目錄下添加文件 color.js ，添加配置內(nèi)容：

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: [ //需要?jiǎng)討B(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'), //頁(yè)面引入的主題變量文件
}

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的變量文件，實(shí)現(xiàn)變量的覆蓋
@primary-color: #1DA57A;
@link-color: #1DA57A;
@btn-primary-bg:#1DA57A;

HTML文件中加入全局less配置

index.html 中加入全局 less 變量配置，從而使 less 的 modifyVars 方法可以全局使用，切換主題時(shí)覆蓋 default.less 中的變量：

<!-- 使用自動(dòng)生成的color.less，主要路徑與index.html文件同級(jí) -->
<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>

項(xiàng)目啟動(dòng)處修改

修改項(xiàng)目運(yùn)行配置 package.json ，項(xiàng)目運(yùn)行的同時(shí)完成頁(yè)面color文件的配置

"scripts": {
 "start": "node color && node scripts/start.js",
 "build": "node color && node scripts/build.js",
 "test": " node color && node scripts/test.js"
},

頁(yè)面調(diào)用方法切換主題

頁(yè)面點(diǎn)擊主題切換配置，這樣寫(xiě)的緣故是因?yàn)槲遗渲玫淖兞坎煌?br />

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)
});

由于之后的配置中新增的樣式需要遵循主題配置的可以選擇使用統(tǒng)一變量，所以變量設(shè)置的時(shí)候，可以添加 var(--PC) 的全局變量設(shè)置

總結(jié)

以上所述是小編給大家介紹的react實(shí)現(xiàn)antd線上主題動(dòng)態(tài)切換功能,希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
如果你覺(jué)得本文對(duì)你有幫助，歡迎轉(zhuǎn)載，煩請(qǐng)注明出處，謝謝！

您可能感興趣的文章: