如何用React实现Ant Design线上主题动态切换功能？

本文共计966个文字，预计阅读时间需要4分钟。

demo 框架选择：create-react-app + mobx + webpack5 + antdesign说明：由于近期公司多个项目主题共享，需要实现线上主题切换功能。本文主要描述基于 create-react-app 的主题切换实现。

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。