Javascript 将css文件动态导入react

我想知道是否有一种方法可以将css文件动态导入react。 假设我有一个名为style-light.css的css文件，另一个名为style-dark.css。 有没有一种方法可以使用react state或其他方法根据状态的当前值将css文件动态导入组件？ 乙二醇

导入“./style light.css”//default导入
导出默认函数TestImport（）{
常数[开关，设置开关]=使用状态（“灯”）；
如果（开关==“暗”）{
导入“./style dark.css”//将样式暗导入添加到亮导入的下方，以覆盖亮css。
}
返回(
设置开关（“暗”）}>单击以获得暗css
)
}

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

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

变量。css

:root {
    --textColor: black;
}

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

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

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

component.js

:root {
    --textColor: black;
}

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

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

document.documentElement.classList.add（'dark-theme'））
document.documentElement.classList.remove（'dark-theme'）

在组件样式上，可以将变量与

var（--variable）

component.css

:root {
    --textColor: black;
}

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

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

选择2 使用一些CSS-IN-JS库，比如样式化组件或情感，您可以使用ThemeProvider根据应用程序中的某些状态相应地更改主题。请参见以下示例：