css - Ant design v4 中如何动态切换主题？

Question

我想使用 Ant design v4 实现动态切换深色/浅色主题。

可以使用其他 CSS/LESS 导入来自定义主题，如下所示: https://ant.design/docs/react/customize-theme#Use-dark-theme

但我不确定如何从代码动态地在这些主题之间切换。我的 React 应用程序中有一个变量 (darkMode)，它指示当前是否使用深色主题。当此变量更改时，我必须提供正确的 CSS 文件。但我无法仅在满足某些条件时动态导入 CSS，因为这不是导入的工作方式。

我尝试用 require 做一些困惑的事情，如下面的代码，但这是一个非常非常糟糕的方法，它仍然无法正常工作(因为 CSS 被注入(inject)但可能没有撤回。):

const Layout = () => {
  ...
  useEffect(() => {
    if (darkMode === true) {
      require("./App.dark.css")
    } else {
      require("./App.css")
    }
  }, [darkMode])

  return (
    <Home />
  )
}

应该可以以某种方式切换主题，因为它已经在 Ant 设计文档中实现了 ( https://ant.design/components/button/ ):

你知道该怎么做吗？

谢谢!

Answer 1

这就是我现在正在使用的 -

附注-

1. 我不知道这是否会产生最佳的 bundle 大小。
2. 更改主题会导致页面重新加载。

<小时/>

创建一个名为“themes”的文件夹 - 它将有 6 个文件 -> dark-theme.css、dark-theme.jsx、light-theme.css、light-theme.jsx、use-theme.js、theme-提供者.jsx。下面分别介绍了它们。

深色主题.css

import "~antd/dist/antd.dark.css";

深色主题.jsx

import "./dark-theme.css";
const DarkTheme = () => <></>;
export default DarkTheme;

浅色主题.css

@import "~antd/dist/antd.css";

轻主题.jsx

import "./light-theme.css";
const LightTheme = () => <></>;
export default LightTheme;

<小时/>

use-theme.js 不同组件可以使用的自定义 Hook -

import { useEffect, useState } from "react";

const DARK_MODE = "dark-mode";

const getDarkMode = () => JSON.parse(localStorage.getItem(DARK_MODE)) || false;

export const useTheme = () => {
  const [darkMode, setDarkMode] = useState(getDarkMode);

  useEffect(() => {
    const initialValue = getDarkMode();
    if (initialValue !== darkMode) {
      localStorage.setItem(DARK_MODE, darkMode);
      window.location.reload();
    }
  }, [darkMode]);

  return [darkMode, setDarkMode];
};

<小时/>

主题提供者.jsx

import { lazy, Suspense } from "react";
import { useTheme } from "./use-theme";

const DarkTheme = lazy(() => import("./dark-theme"));
const LightTheme = lazy(() => import("./light-theme"));

export const ThemeProvider = ({ children }) => {
  const [darkMode] = useTheme();

  return (
    <>
      <Suspense fallback={<span />}>
        {darkMode ? <DarkTheme /> : <LightTheme />}
      </Suspense>
      {children}
    </>
  );
};

<小时/>

将index.js更改为-

ReactDOM.render(
  <React.StrictMode>
    <ThemeProvider>
      <App />
    </ThemeProvider>
  </React.StrictMode>,
  document.getElementById("root")
);

<小时/>

现在，在我的导航栏中假设我有一个开关来切换主题。这就是它的样子 -

const [darkMode, setDarkMode] = useTheme();
<Switch checked={darkMode} onChange={setDarkMode} />