react + antd实现动态切换主题功能（适用于antd5.x版本）

曾经终败给现在 2024-03-16 17:03 18阅读 0赞

### 前言 ###

在之前的几篇文章中（[React + Antd实现动态切换主题功能之二（默认主题与暗黑色主题切换）][React _ Antd]、[React + Antd实现动态切换主题功能][React _ Antd 1]）介绍了antd实现动态切换主题功能，文章里介绍的方法在antd5.x版本却不适用，因为and5.x版本弃用了less，改用了css-in-js方案（[https://ant-design.antgroup.com/docs/react/migration-v5-cn\#技术调整][https_ant-design.antgroup.com_docs_react_migration-v5-cn]）

### antd5.x版本中实现方案 ###

在5.x版本中，如果想实现动态主题切换（默认主题切换与暗色主题），有一种更加简单的方案，就是借助于`ConfigProvider`（[https://ant-design.antgroup.com/components/config-provider-cn][https_ant-design.antgroup.com_components_config-provider-cn]）。  
参考`ConfigProvider`的API（[ConfigProvider Api][]），会发现其中有一个`theme`的属性，再根据介绍中跳转至[定制主题][Link 1]，仔细阅读会惊喜的发现以下说明：

> 通过修改算法可以快速生成风格迥异的主题，5.0 版本中默认提供三套预设算法，分别是默认算法 `theme.defaultAlgorithm`、暗色算法 `theme.darkAlgorithm` 和紧凑算法 `theme.compactAlgorithm`。你可以通过修改 ConfigProvider 中 theme 属性的 algorithm 属性来切换算法。

不难发现介绍中的默认算法 `theme.defaultAlgorithm`、暗色算法 `theme.darkAlgorithm` 分别是我们所需要的默认主题和暗色主题。并且官网中也给出了一小段代码，展示了如何设置`ConfigProvider.theme`属性配置：

import {
         Button, ConfigProvider, theme } from 'antd';
    import React from 'react';
    
    const App: React.FC = () => (
      <ConfigProvider
        theme={
        {
        
          algorithm: theme.darkAlgorithm,
        }}
      >
        <Button />
      </ConfigProvider>
    );
    
    export default App;

按照上面的实例，我们只需要依样画葫芦，动态修改`ConfigProvider.theme`属性即可。  
代码如下：

import React, {
         useState } from "react";
    import "./index.css";
    import {
        
      Button,
      Calendar,
      Card,
      DatePicker,
      Empty,
      Layout,
      Radio,
      Space,
      ConfigProvider,
      theme
    } from "antd";
    
    import type {
         RadioChangeEvent } from "antd";
    import {
         DownloadOutlined } from "@ant-design/icons";
    
    const App: React.FC = () => {
        
      const [value, setValue] = useState("default");
      const onChange = (e: RadioChangeEvent) => {
        
        console.log("radio checked", e.target.value);
        setValue(e.target.value);
      };
      return (
        // default则使用theme.defaultAlgorithm, dark则使用theme.darkAlgorithm
        <ConfigProvider
          theme={
        {
        
            algorithm:
              value === "default" ? theme.defaultAlgorithm : theme.darkAlgorithm
          }}
        >
          <Layout>
            <Layout.Content>
              <Radio.Group onChange={
        onChange} value={
        value}>
                <Radio value={
        "default"}>default</Radio>
                <Radio value={
        "dark"}>dark</Radio>
              </Radio.Group>
              <br />
              <Space>
                <DatePicker />
                <Empty />
                <Card
                  title="Default size card"
                  extra={
        <a href="#">More</a>}
                  style={
        {
         width: 300 }}
                >
                  <p>Card content</p>
                  <p>Card content</p>
                  <p>Card content</p>
                </Card>
              </Space>
              <br />
              <Space>
                <Radio.Group>
                  <Radio.Button value="large">Large</Radio.Button>
                  <Radio.Button value="default">Default</Radio.Button>
                  <Radio.Button value="small">Small</Radio.Button>
                </Radio.Group>
                <br />
                <br />
                <Button type="primary">Primary</Button>
                <Button>Default</Button>
                <Button type="dashed">Dashed</Button>
                <br />
                <Button type="link">Link</Button>
                <br />
                <Button type="primary" icon={
        <DownloadOutlined />} />
                <Button type="primary" shape="circle" icon={
        <DownloadOutlined />} />
                <Button type="primary" shape="round" icon={
        <DownloadOutlined />} />
                <Button type="primary" shape="round" icon={
        <DownloadOutlined />}>
                  Download
                </Button>
                <Button type="primary" icon={
        <DownloadOutlined />}>
                  Download
                </Button>
              </Space>
              <br />
              <Space>
                <Calendar fullscreen={
        false} />
              </Space>
            </Layout.Content>
          </Layout>
        </ConfigProvider>
      );
    };
    
    export default App;

最终实现效果如下：  
![默认主题和暗黑主题切换效果][d8697cc889a24db9a9785c027f768e21.gif_pic_center]

### 写在最后 ###

至此antd5.x版本下默认主题与暗黑主题动态切换效果已经大功告成，具体实现代码可以移步至codesandbox：[https://codesandbox.io/s/antd5-x-change-style-87pldy?file=/demo.tsx][https_codesandbox.io_s_antd5-x-change-style-87pldy_file_demo.tsx]  
有想法的朋友欢迎在评论区进行交流，也欢迎大家点赞、收藏。

[React _ Antd]: https://blog.csdn.net/m0_58016522/article/details/121751043
[React _ Antd 1]: https://blog.csdn.net/m0_58016522/article/details/122067153
[https_ant-design.antgroup.com_docs_react_migration-v5-cn]: https://ant-design.antgroup.com/docs/react/migration-v5-cn#%E6%8A%80%E6%9C%AF%E8%B0%83%E6%95%B4
[https_ant-design.antgroup.com_components_config-provider-cn]: https://ant-design.antgroup.com/components/config-provider-cn
[ConfigProvider Api]: https://ant-design.antgroup.com/components/config-provider-cn#api
[Link 1]: https://ant-design.antgroup.com/docs/react/customize-theme-cn
[d8697cc889a24db9a9785c027f768e21.gif_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/16/8045b9c08fd847089b8c60d0d2bb06da.png
[https_codesandbox.io_s_antd5-x-change-style-87pldy_file_demo.tsx]: https://codesandbox.io/s/antd5-x-change-style-87pldy?file=/demo.tsx