动态导入css文件到react中

【问题标题】：Dynamically importing css files into react动态导入css文件到react中
【发布时间】：2020-12-08 21:54:07
【问题描述】：

我想知道有没有办法将 css 文件动态导入到 react.js 中。假设我有一个名为 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>
)
}

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

【问题讨论】：

标签： javascript reactjs import use-state

【解决方案1】：

选项 1

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

variables.css

:root {
    --textColor: black;
}

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

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

component.js

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

在您的组件样式中，您可以使用带有var(--variable) 的变量

component.css

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

选项 2

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

【讨论】：