React-Toastify styling issue in TypeScript - Unable to set z-index for Toast container
P粉529581199
2023-08-28 17:00:25
<p>I am currently developing a React application using TypeScript and integrating the React-Toastify library to display notifications. </p>
<p>However, I ran into some styling issues with the ToastContainer component. Specifically, I want to set the ToastContainer's z-index to 1000, but I've tried unsuccessfully to do this using inline styles. </p>
<pre class="brush:php;toolbar:false;"><ToastContainer
style={{ fontSize: "14px", zIndex: "1000" }}
autoClose={2000}
hideProgressBar={true}
/></pre>
<p>Despite setting the z-index to 1000, the ToastContainer does not appear on top of other elements as expected. I also checked if there are any other CSS styles affecting the component, but that doesn't seem to be the case. </p>
<p>I researched this problem online and tried various solutions suggested by the community, such as using global CSS and overriding styles via classes, but none of them worked. </p>
<p>Can someone please guide me on how to resolve styling issues with the ToastContainer component and set the z-index correctly? </p>
This is the injected element
This is the style of
div
. I don't see anyposition
settings. If you add theposition
attribute your code should work