反应亮/暗模式切换

Question

我想在react中建立最简单的暗/亮切换按钮。到目前为止，我已经制作了一个切换器组件，并使用

为其提供了状态

this.state = {style: './App.css'} 

和2个功能之一是将this.state.style设置为./darkmode.css，另一个是返回./App.css，我将它们绑定到2个按钮上。我的问题是，有没有办法使用这样的东西：在App.js文件中导入'this.state.style'而不是导入./App.css？至少我的思维方式使我到达了这里，因为这似乎是更改页面样式表最简单的方法。在css文件中，只有平滑的相机和bg颜色没有什么大不了的。

Answer 1

我认为您无法做到这一点，但是在JS端，当您使用.TogggleClass（）按下按钮时，可以更改body元素的类。在CSS方面，您只需更改CSS。

Answer 2

最简单的暗/亮模式解决方案是使用Context API和useContext Hook，它比使用任何其他解决方案都更容易，更简单且更具可读性，您可以使用此解决方案创建全新主题。因此，请尝试一下，您一定会喜欢其中的结果和实验。