在React中切换两个外部CSS文件

Question

我想添加一个选项，让用户可以在应用程序中切换深色模式和浅色模式。

     <link rel="stylesheet" href="../src/cssf/light.css">
     <link rel="stylesheet" href="../src/cssf/dark.css">

我有两个表格用于整个网站。

<label class="form-check-label" id="dark">
                            <input type="radio" class="form-check-input" checked name="theme"><label>Dark</label>
                          </label>
                        </div>
                        <div class="form-check-inline">
                          <label class="form-check-label" id="light">
                            <input type="radio" class="form-check-input" name="theme"><label>Light</label>
                          </label>

我已经提供了选项，但是我需要做什么才能在两个CSS文件之间切换？

import React, { useEffect, useState } from "react";
import "./cssf/style.css";
import logo from "./cssf/logo-sm.png";

function App() {

  const [ stylePath, setStylePath ] = useState("./cssf/dark-theme.css");
    
  const handleButtonClick = () => {
    setStylePath("./cssf/light-theme.css");
  }

  useEffect(() => {
    var head = document.head;
    var link = document.createElement("link");

    link.type = "text/css";
    link.rel = "stylesheet";
    link.href = stylePath;

    head.appendChild(link);

    return () => { head.removeChild(link); }

  }, [stylePath]);

我使用了这种方法，它可以完美地更新头部链接标签，但是如果不使用“import" "../cssf/sheername.css"”将其导入到我的应用程序中，则没有任何用处。我该如何解决？

- tanmay

Answer 1

这是一个非常有趣的问题。

关于在React中动态导入CSS文件，我建议查看这个线程：这里

然而，我认为这不是最好的解决方案，因为它可能很难维护，也不够DRY。

我更愿意只有一个CSS文件，它查看body上的类并根据此更改CSS颜色（假设您不改变布局，只改变颜色）。

- Jasper Chesselet

---

是的，我也认为这不是最好的解决方案。只是客户提供了这两个CSS文件，并要求应用切换选项。我不知道该怎么办。 - tanmay

啊，好的，说得对。我认为我提供的链接肯定会指引你朝着正确的方向前进。 :) - Jasper Chesselet