[英]Switch between two external css files in react
我想应用一个选项,用户可以在应用程序中在暗模式和亮模式之间切换。
<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" 将其导入我的应用程序,它没有用。我该如何解决?
这是一个非常有趣的问题。
为了将 css 文件动态导入到反应中,我会检查这个线程: 这里
但是我不认为这是最好的解决方案,因为它可能很难维护并且不是很干燥。
I would rather have 1 css file that looks at the class on body and changes css colors based on that (assuming you don't change layout, only colors)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.