反应亮/暗模式切换答案

【问题标题】：React light/dark mode toggle反应亮/暗模式切换
【发布时间】：2020-10-20 00:29:56
【问题描述】：

我想在 react 中构建最简单的暗/亮切换按钮，有。到目前为止，我已经制作了一个切换器组件并给它一个状态

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

还有 2 个函数，一个是将 this.state.style 设置为 ./darkmode.css 另一个是返回到 ./App.css 我将它们绑定到 2 个按钮。我的问题是，有没有办法使用这样的东西：在 App.js 文件中使用 import 'this.state.style' 而不是 import ./App.css？至少我的思维方式让我来到了这里，因为这看起来是最容易更改页面样式表的方法。 css文件没什么大不了的，只有平滑的相机和bg颜色。

【问题讨论】：

该状态将用于根据明暗将 CSS 加载到页面标题中

标签： javascript html css reactjs

【解决方案1】：

我不认为你可以这样做，但在 JS 方面，你可以在按下按钮时使用 .TogggleClass() 更改 body 元素的类。在 CSS 方面，您只需更改 css。

【讨论】：

【解决方案2】：

制作简单的暗/亮模式最合适的解决方案是使用 Context API 和useContext Hook 它比使用任何其他解决方案更容易、更简单和更具可读性，您可以使用此解决方案制作全新的主题。所以试一试，你一定会喜欢结果和实验。

【讨论】：