demo

專注于為中小企業(yè)提供成都網(wǎng)站設(shè)計(jì)、做網(wǎng)站、成都外貿(mào)網(wǎng)站建設(shè)公司服務(wù),電腦端+手機(jī)端+微信端的三站合一,更高效的管理,為中小企業(yè)安順免費(fèi)做網(wǎng)站提供優(yōu)質(zhì)的服務(wù)。我們立足成都，凝聚了一批互聯(lián)網(wǎng)行業(yè)人才，有力地推動(dòng)了近千家企業(yè)的穩(wěn)健成長，幫助中小企業(yè)通過網(wǎng)站建設(shè)實(shí)現(xiàn)規(guī)模擴(kuò)充和轉(zhuǎn)變。

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

說明

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

generateTheme(options).then(less => {
 console.log('Theme generated successfully');
})
.catch(error => {
 console.log('Error', error);
});

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時(shí)售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價(jià)比高”等特點(diǎn)與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場景需求。

標(biāo)題名稱：react實(shí)現(xiàn)antd線上主題動(dòng)態(tài)切換功能-創(chuàng)新互聯(lián)
標(biāo)題URL：http://chinadenli.net/article42/eochc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供App開發(fā)、ChatGPT、虛擬主機(jī)、域名注冊(cè)、全網(wǎng)營銷推廣、面包屑導(dǎo)航

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)