您现在的位置是：首页 >其他 >react + antd实现动态切换主题功能（适用于antd5.x版本）网站首页其他

前言

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

antd5.x版本中实现方案

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

通过修改算法可以快速生成风格迥异的主题，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;

最终实现效果如下：

写在最后

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