TypeScript の React-Toastify スタイルの問題 - Toast コンテナーの z-index を設定できない

Question

<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} /> <p>z-index を 1000 に設定しているにもかかわらず、ToastContainer は期待どおりに他の要素の上に表示されません。コンポーネントに影響を与える他の CSS スタイルがあるかどうかも確認しましたが、そうではないようです。 </p> <p>この問題をオンラインで調査し、グローバル CSS の使用やクラスを介したスタイルのオーバーライドなど、コミュニティによって提案されたさまざまな解決策を試しましたが、どれも機能しませんでした。 </p> <p>ToastContainer コンポーネントのスタイルの問題を解決し、z-index を正しく設定する方法を誰かが教えてくれませんか? </p>

Answer 1

これは挿入された要素です

リーリー

これは div のスタイルです。 position 設定が表示されません。 position 属性を追加すると、コードは機能するはずです

リーリー