反應亮/暗模式切換

Question

我想在反應中構建最簡單的暗/亮切換按鈕，有。 到目前為止，我已經制作了一個切換器組件並給了它一個 state

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

和 2 個功能，一個是將 this.state.style 設置為 ./darkmode.ZC7A62 ./darkmode.css另一個是返回到./App.css按鈕。 我的問題是，有什么方法可以使用這樣的東西：在 App.js 文件中使用 import 'this.state.style' 而不是 import ./App.css 8CBA22E28EB17B5F5C6AE2A266AZ ？ 至少我的思維方式讓我來到了這里，因為這看起來是最容易更改頁面樣式表的方法。 css文件沒有什么大不了的，只有平滑的相機和bg顏色。

Answer 1

我不認為你可以這樣做，但在 JS 方面，你可以在按下帶有.TogggleClass() 的按鈕時更改 body 元素的 class。 在 CSS 一側，您只需更改 css。

Answer 2

制作簡單的暗/亮模式最合適的解決方案是使用 Context API 和useContext Hook 它比使用任何其他解決方案更容易、更簡單和更具可讀性，您可以使用此解決方案制作全新的主題。 所以試一試，你一定會喜歡結果和實驗。