reactjs - 如何在下一个 js 中动态更改全局样式表

Question

我有两个 CSS 文件，一个用于 Light 主题，另一个用于 Dark 主题。如何动态更改样式表？

这是我目前在 __app.js 中使用的代码

import React, { useState, useEffect } from "react";
import "../styles/globals.css";
import "primereact/resources/primereact.min.css";
import "primeicons/primeicons.css";
import { ThemeContext } from "../context/ThemeContext";

function MyApp({ Component, pageProps }) {
  const [theme, setTheme] = useState("light");

  useEffect(() => {
    if (theme == "dark") {
      import("primereact/resources/themes/arya-blue/theme.css");
    }
    if (theme == "light") {
      import("primereact/resources/themes/saga-blue/theme.css");
    }
  }, [theme]);

  return (
    <ThemeContext.Provider value={[theme, setTheme]}>
        <Component {...pageProps} />
    </ThemeContext.Provider>
  );
}

export default MyApp;

此代码正在从浅色主题切换到深色主题，但无法从深色切换到浅色。他们有更好的方法吗？

标签： reactjsnext.js

Answer 1

light问题是当从主题切换回主题时，dark您的应用程序包含两个主题的darkcss light。

我想到的一种解决方案是将主题状态存储在本地存储中，然后重新加载页面，就像这样

虽然它有一个缺点，即在主题更改后，您的网站会失去所有其他状态

import React, { useState, useEffect } from "react";
import "../styles/globals.css";
import "primereact/resources/primereact.min.css";
import "primeicons/primeicons.css";
import { ThemeContext } from "../context/ThemeContext";

function MyApp({ Component, pageProps }) {
  const [theme, setTheme] = useState("light");
  const currentTheme = localStorage.getItem("theme");

  useEffect(() => {
    localStorage.setItem("theme",theme)
    window.location.reload();
  }, [theme]);

  if (currentTheme == "dark") {
      import("primereact/resources/themes/arya-blue/theme.css");
    }
    if (currentTheme == "light") {
      import("primereact/resources/themes/saga-blue/theme.css");
    }

  return (
    <ThemeContext.Provider value={[theme, setTheme]}>
        <Component {...pageProps} />
    </ThemeContext.Provider>
  );
}

export default MyApp;