时间戳

首页 > 解决方案 > 动态导入css文件到react中

javascript - 动态导入css文件到react中

问题描述

我想知道有没有办法动态地将css文件导入到react中。假设我有一个名为 style-light.css 的 css 文件，而我还有另一个名为 style-dark.css 的 css 文件。有没有办法使用反应状态或其他方法根据状态的当前值将 css 文件动态导入组件？例如

import "../style-light.css" // default import


export default function TestImport(){
const [switch, setSwitch] = useState("light");

if(switch === "dark"){
import "../style-dark.css" // adds the style-dark import below the light one to overwrite the light css.
}

return (
<div>
<button onClick={()=> setSwitch("dark")}> click to get dark css </button>
</div>
)
}

基本上是这样的吗？任何见解都会有所帮助。谢谢

标签： javascriptreactjsimportuse-state

解决方案

选项1

为此，我建议您使用 CSS 变量并且只使用一个 CSS 文件。您可以根据页面正文上应用的类更改变量的值。例如：

变量.css

:root {
    --textColor: black;
}

[class="dark-theme"] {
    --textColor: white;
}

使用 javascript，您可以在 html 文档中添加或删除类，如下所示

组件.js

document.documentElement.classList.add('dark-theme')
document.documentElement.classList.remove('dark-theme')

在您的组件样式上，您可以将变量与var(--variable)

组件.css

.my-component-class {
  color: var(--textColor);
}

选项 2

使用一些 CSS-IN-JS 库，如 styled-components 或情感，您可以使用 ThemeProvider 来根据应用程序中的某些状态相应地更改我们的主题。在此处查看此示例：https ://styled-components.com/docs/advanced#theming

推荐阅读