cssreactjstypescriptreact-toastify

React-Toastify Styling Issue in TypeScript - Unable to Set z-index for Toast Container

I am currently developing a React application using TypeScript and have integrated the React-Toastify library for displaying notifications.

However, I am facing some styling issues with the ToastContainer component. Specifically, I want to set the z-index of the ToastContainer to 1000, but my attempts to do so using inline styles have been unsuccessful.

<ToastContainer
style={{ fontSize: "14px", zIndex: "1000" }}
autoClose={2000}
hideProgressBar={true}
/>

Despite setting the z-index to 1000, the ToastContainer does not appear on top of other elements as expected. I have also checked if any other CSS styling is affecting the component, but it doesn't seem to be the case.

I have researched this issue online and have tried various solutions suggested by the community, like using global CSS and overriding the styles through classes, but none of them have worked.

Can someone please guide me on how to resolve this styling issue with the ToastContainer component and set the z-index correctly?

Solution

  • The "zIndex" is expecting to get a number and not a string.

    <ToastContainer
 style={{ fontSize: "14px", zIndex: 1000 }}
 autoClose={2000}
 hideProgressBar={true}
/>

    This should work.