☰

Ant design v4 でテーマを動的に切り替えるにはどうすればいいですか? 質問する

tag-icon • tag-icon css reactjs less antd
Ant design v4 でテーマを動的に切り替えるにはどうすればいいですか? 質問する

実装したいダークテーマとライトテーマを動的に切り替えるAntデザインv4を使用。

ここに書かれているように、他の CSS/LESS インポートを使用してテーマをカスタマイズすることも可能です。https://ant.design/docs/react/customize-theme#ダークテーマの使用

しかし、コードからこれらのテーマを動的に切り替える方法がわかりません。React アプリ ( darkMode) に、現在ダーク テーマが使用されているかどうかを示す変数があります。この変数が変更されたときには、正しい CSS ファイルを提供する必要があります。ただし、インポートの仕組みが間違っているため、ある条件が満たされた場合にのみ CSS を動的にインポートすることはできません。

次のコードのように面倒なことをしようとしましたrequireが、これは非常に悪いアプローチであり、まだ適切に動作していません (CSS は挿入されますが、削除されない可能性があるためです)。

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

  return (
    <Home />
  )
}

Antのデザインドキュメントにすでに実装されているので、何らかの方法でテーマを切り替えることは可能であるはずです（https://ant.design/components/button/):

Antd ドキュメントのテーマ切り替え

どうすればいいか分かりますか？

ありがとう！

ベストアンサー1

私が今使っているのはこれです -

追伸 -

  1. これによって最適なバンドル サイズが得られるかどうかはわかりません。
  2. テーマを変更するとページが再読み込みされます。

「themes」というフォルダを作成します。このフォルダには、dark-theme.css、dark-theme.jsx、light-theme.css、light-theme.jsx、use-theme.js、theme-provider.jsx の 6 つのファイルが含まれます。それぞれについて、以下で説明します。


ダークテーマ.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;

テーマを使用するさまざまなコンポーネントが使用できるカスタムフック-

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} />

おすすめ記事