TypeScript 中的 React-Toastify 樣式問題 - 無法為 Toast 容器設定 z-index
P粉529581199
2023-08-28 17:00:25
<p>我目前正在使用 TypeScript 開發 React 應用程序,並整合了 React-Toastify 程式庫來顯示通知。 </p>
<p>但是,我遇到了 ToastContainer 元件的一些樣式問題。具體來說,我想將 ToastContainer 的 z-index 設為 1000,但我嘗試使用內聯樣式執行此操作未成功。 </p>
<pre class="brush:php;toolbar:false;"><ToastContainer
style={{ fontSize: "14px", zIndex: "1000" }}
autoClose={2000}
hideProgressBar={true}
/></pre>
<p>儘管將 z-index 設定為 1000,ToastContainer 並未如預期出現在其他元素之上。我還檢查了是否有任何其他 CSS 樣式影響該元件,但似乎並非如此。 </p>
<p>我在網路上研究了這個問題,並嘗試了社群建議的各種解決方案,例如使用全域 CSS 和透過類別覆蓋樣式,但沒有一個有效。 </p>
<p>有人可以指導我如何解決 ToastContainer 元件的樣式問題並正確設定 z-index 嗎? </p>
這是注入的元素
這是
div
的樣式。我沒有看到任何position
設定。如果您新增position
屬性,您的程式碼應該可以工作