TypeScript의 React-Toastify 스타일 문제 - Toast 컨테이너에 대해 z-index를 설정할 수 없습니다.

Question

저는 현재 TypeScript를 사용하여 React 애플리케이션을 개발하고 있으며 React-Toastify 라이브러리를 통합하여 알림을 표시하고 있습니다.

그러나 ToastContainer 구성 요소에서 몇 가지 스타일 문제가 발생했습니다. 특히 ToastContainer의 z-index를 1000으로 설정하고 싶지만 인라인 스타일을 사용하여 이 작업을 수행하려고 했으나 실패했습니다.

<ToastContainer
style={{ 글꼴 크기: "14px", zIndex: "1000"
자동닫기={2000}
hideProgressBar={true}
//>

z-index를 1000으로 설정했음에도 불구하고 ToastContainer가 예상대로 다른 요소 위에 표시되지 않습니다. 또한 구성 요소에 영향을 미치는 다른 CSS 스타일이 있는지 확인했지만 그렇지 않은 것 같습니다.

저는 이 문제를 온라인으로 조사하고 전역 CSS를 사용하고 클래스를 통해 스타일을 재정의하는 등 커뮤니티에서 제안한 다양한 솔루션을 시도했지만 아무 것도 작동하지 않았습니다.

ToastContainer 구성요소의 스타일 문제를 해결하고 Z-색인을 올바르게 설정하는 방법을 안내해 주실 수 있나요?

Answer 1

주입된 요소입니다

으아악

이것이 div 的样式。我没有看到任何 position 设置。如果您添加 position 속성이고 코드가 작동해야 합니다

으아악