React + Antd实现动态切换主题功能

思路分析：

整体思路：引入打包好的样式文件，通过动态更改类名来应用到对应的css文件，改变样式。生产环境同样使用，且工程化(替换css文件即改变样式，无需再次操控代码)。

通过ConfigProvider全局化配置prefixCls的方式来修改ant design样式的prefix，即默认主题通过类名前缀custom-default来控制样式，而暗色主题通过类名前缀custom-dark来控制样式

1. 编译默认主题css文件
# 指定prefix为custom-default
# 源文件为antd.less
$ lessc --js --modify-var="ant-prefix=custom-default" node_modules/antd/dist/antd.less custom-default.css

按照上述步骤的命令会生成一个custom-default.css的文件，该文件为默认主题的样式文件，在该文件内容中有一段如下样式：

body {
  margin: 0;
  color: rgba(0, 0, 0, 0.85);
  font-size: 14px;
 ...
}

这段内容主要是控制body区块的样式，我们将这段样式做如下修改

body .custom-default { /*添加.custom-default子样式*/
  margin: 0;
  color: rgba(0, 0, 0, 0.85);
  font-size: 14px;
  ...

2. 同上述步骤1的处理，编译暗黑色主题css文件
# 指定prefix为custom-dark
# 源文件为antd.dark.less
$ lessc --js --modify-var="ant-prefix=custom-dark" node_modules/antd/dist/antd.dark.less custom-dark.css

同样的，生成的暗黑色样式文件custom-dark.css中有这么一段：

body {
  margin: 0;
  color: rgba(255, 255, 255, 0.85);
  font-size: 14px;
...
}
我们也做类似的修改：

body .custom-dark { /*添加.custom-dark 子样式*/
  margin: 0;
  color: rgba(255, 255, 255, 0.85);
  font-size: 14px;
}

3.App.tsx中引入上述两个步骤生成的css文件
import "./custom-default.css";    // 引入custom-default.css 以及 custom-dark.css

import "./custom-dark.css";

4.在总组件上进行ConfigProvider包裹（作用：动态改变类名）

 <ConfigProvider prefixCls={prefix}>
   <div className={prefix}>
     <App />
   </div>
</ConfigProvider>

language-tsx

参考文章

React + Antd实现动态切换主题功能_草率小猿的博客-CSDN博客

https://blog.csdn.net/m0_58016522/article/details/122067153