我正在嘗試在我的應用程式中實作暗模式。
這個想法是將其添加到根元素：
<div id="dark">
然后在 CSS 中：
#dark {
background-color: #1A1A2E;
}
然后在 Css 中，使用類自定義每個 dom 元素。例如，在這里我將處理卡片：
#dark .card-body {
background-color: #16213E !important;;
}
#dark .card-header {
background-color: #0F3460 !important;
}
現在，這作業得很好。
但是，對于Modals，它不起作用。我認為這是因為 Modals 最初沒有渲染，所以由于某種原因，深色樣式不適用于它們。
但有效的是向每個模態添加 id="dark" ：
#dark .modal-header {
background-color: #0F3460 !important;
}
#dark .modal-body {
background-color: #16213E !important;;
}
#dark .modal-footer {
background-color: #16213E !important;;
}
<Modal
// dark doesn't get applied automatically for modals because apparently modals are not rendered in the beginning
id="dark"
isOpen={this.state.isModalOpen}
toggle={this.toggleModal}
>
<div className="modal-header">
但是，將其應用于每個模態會很痛苦。
這里提到的一種解決方案：
模態應該是具有 id="dark" 的標簽的后代。它由腳本標簽正下方的腳本加載，您試圖將“暗”id 放在某個 div 標簽上，并且模式不在其中，因此 CSS 選擇器沒有針對它。
因此，您需要將 id="dark" 放在 body 標簽上。
這解決了模態問題。
但是，問題出在我最初的暗模式實作中，我在根組件中控制該 id，如下所示：
// Root component
<div id={this.state.should_enable_dark_mode ? "dark" : "default"}>
并且should_enable_dark_mode是這樣管理的：
manageDarkMode() {
window.addEventListener("storage", () => {
console.log("change to local storage!");
let should_enable_dark_mode = localStorage.darkMode == "true";
this.setState({
should_enable_dark_mode,
});
});
}
所以上面提到的解決方案的問題是我找不到從react應用程式控制body標簽的方法。而且我不確定這是否是一件好事。
你覺得我應該怎么做？
uj5u.com熱心網友回復：
我在對您原始問題的評論中看到，您決定只修改瀏覽器 DOM 中的 body 元素，這可能會正常作業，因為 body 元素不受 React 控制，并且可能不會被任何其他代碼更改。
但是，我想提出一些改進，使其不那么臟：
使用資料屬性，例如
data-display-mode="dark"作為 CSS 選擇器的目標，而不是 ID。ID 應該是穩定的，其他工具和庫（例如 UI 測驗工具）可能依賴于此。使用該
Modal.container屬性將您的 Modals 附加到App元素（您可以控制的 React 代碼中定義的 React 控制的全域父 div，而不是 index.html 中的 app-root-div）。然后data-display-mode通過 React-means 在這里設定你的屬性。這樣你就不會繞過虛擬 DOM。使用CSS 自定義屬性定義顏色，然后在一處定義所有暗模式修改。不要將你的暗模式樣式代碼分布在多個類選擇器中——你將很難維護它。
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/495676.html
上一篇：單擊相應按鈕隱藏影像
下一篇：如何在DOM中取消注釋行內腳本