动态导入 css 文件到 react

Question

我想知道有没有办法将 css 文件动态导入到反应中。 假设我有一个名为 style-light.css 的 css 文件，我还有另一个名为 style-dark.css 的文件。 有没有办法使用反应 state 或其他方法根据 state 的当前值将 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>
)
}

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

Answer 1

选项1

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

变量.css

:root {
    --textColor: black;
}

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

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

组件.js

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

在您的组件 styles 上，您可以使用带有var(--variable)的变量

组件.css

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

选项 2

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