我正在嘗試在我的應用程式中實作暗模式。
這個想法是將其添加到根元素：
<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">
但是，將其應用于每個模態會很痛苦。知道如何解決這個問題嗎？
uj5u.com熱心網友回復：
模態應該是具有 id="dark" 的標簽的后代。它由腳本標簽正下方的腳本加載，您試圖將“暗”id 放在某個 div 標簽上，并且模式不在其中，因此 CSS 選擇器沒有針對它。
所以，你需要貼上id="dark"body標簽。
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/493182.html
上一篇：隱私計算FATE-模型訓練
下一篇：如何在DOM中取消注釋行內腳本