react实现线上主题动态切换功能

demo

框架选择： create-react-app + mobx + webpack5 + antdesign

说明

• 由于最近公司有多个主题的共存性，所以需要实现线上主题切换的功能，所以本文主要描述的是基于create-react-app之上的主题切换。
• CSS切换
  有考虑过根据用户选择的主题在切换的时候选择加载页面css文件的区分方案，但是考虑到这种形式需要在页面切换的时候去reload，因为htmlDOM是在css与JS的结合产物，用户体验不是很好。
• Less切换
  单纯引入所有的less文件去做切换，这样不能实现css的动态加载了，会增加无用css文件的加载
• 最后通过比较及查询，获取到第三方插件：antd-theme-generator

功能实现原则：使用 less 的 modifyVars 完成 antd 的主题变量替换。

安装 antd-theme-generator

缺点： 需要配合 LESS v2.7.x 使用，不兼容IE。

cnpm install antd-theme-generator -S

添加主题切换文件