从useEffect动态渲染样式表？

Question

我正在尝试使用按钮（传递给另一个组件）来切换暗模式。最初，我加载一个轻主题样式表。然后，切换主题按钮应删除页面上最新加载的样式表，并将状态设置为与当前状态相反的状态。

我的理解是，然后，useEffect将“看到”状态变化并启动。这就是我们加载新样式表的地方。应用正确加载初始样式表，切换按钮可以正常工作一次，但之后就不能正常工作。第一次更改后，它会删除所有样式。使用反应开发工具，看起来状态正在正确更新。我认为我对useEffect和/或useState的理解是错误的。任何指示或帮助不胜感激！

import { useState, useEffect } from "react";
import Navi from "./Components/Layout/Navi";
import Price from "./Components/Price";
import { BrowserRouter as Router, Route } from "react-router-dom";
import { Container } from "react-bootstrap";
import About from "./Components/About/About";
require("bootswatch/dist/cosmo/bootstrap.min.css");

function App() {
    const [theme, setTheme] = useState("light");
    const toggleTheme = () => {
        Array.from(document.getElementsByTagName("style")).slice(-1)[0].remove();
        setTheme(theme === "dark" ? "light" : "dark");
    };
    useEffect(() => {
        console.log("fire");
        console.log(theme);
        if (theme === "light") {
            require("bootswatch/dist/cosmo/bootstrap.min.css");
        } else if (theme === "dark") {
            require("bootswatch/dist/slate/bootstrap.min.css");
        } else {
            console.log("Theme state not correctly set");
        }
    });
    return (
        <Router path="/">
            <>
                <div className="App">
                    <Navi toggleTheme={() => toggleTheme()} />
                    <Container>
                        <Route path="/" exact component={Price} />
                        <Route path="/about" exact component={About} />
                    </Container>
                </div>
            </>
        </Router>
    );
}

export default App;

Answer 1

你对useEffect的理解似乎是准确的。它们在您期望它们执行时执行。没有像您期望的那样发生的是导入。

当你需要一个css文件时，它会添加一个html标签到你的dom。

<link rel="stylesheet" type="text/css" href="/styles/overrides.css">

＜code＞require＜/code＞添加另一个CSS文件并不能撤消已经发生的＜code＞resquire＜/code＞-它仍然被添加到浏览器样式表中。您可以将其视为导入JS文件而不是渲染组件。

您最直接的选择是将两个文件都导入为字符串，然后在中应用所需的样式

import React, { useState } from "react";
// using inline webpack loaders for convenience of the example in Code Sandbox
import mainCSS from "!!raw-loader!./styles.css";
import altCSS from "!!raw-loader!./altstyles.css";
// Using helmet to bring the styles into the head (not necessary)
import { Helmet } from "react-helmet";

console.log(mainCSS);
export default function App() {
  const [showAltStyles, setShowAltStyles] = useState(false);
  return (
    <div className="App">
      <Helmet>
        <style>{showAltStyles ? altCSS : mainCSS}</style>
      </Helmet>
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
      <button onClick={() => setShowAltStyles(!showAltStyles)}>
        Toggle Alt Styles
      </button>
    </div>
  );
}

带有实现的示例代码沙盒。

更可靠的方法是使用css变量，并使用设置属性的CSS类来重写它们。这将需要更多的工作来适应你的靴子样本主题。

:root {
  --primary: #FFFFFF;
}

.dark-theme {
  --primary: #000000;
}

此选项通过交换为每个样式定义的变量来避免重复样式。如果您选择此选项，您应该考虑浏览器支持，以及您是否可以在不受支持的浏览器上没有主题。