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

Question

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?

score 0 · Answer 1 · answered May 29 '23 at 21:26

z-index will only work on an element whose position property has been explicitly set to absolute, fixed, or relative.

this is the injected element

<div class="Toastify"></div>

this is the style of the div. I do not see any position set. if you add position attribute, your code should work

    -webkit-text-size-adjust: 100%;
    tab-size: 4;
    font-feature-settings: normal;
    --toastify-color-light: #fff;
    --toastify-color-dark: #121212;
    --toastify-color-info: #3498db;
    --toastify-color-success: #07bc0c;
    --toastify-color-warning: #f1c40f;
    --toastify-color-error: #e74c3c;
    --toastify-color-transparent: rgba(255, 255, 255, 0.7);
    --toastify-icon-color-info: var(--toastify-color-info);
    --toastify-icon-color-success: var(--toastify-color-success);
    --toastify-icon-color-warning: var(--toastify-color-warning);
    --toastify-icon-color-error: var(--toastify-color-error);
    --toastify-toast-width: 320px;
    --toastify-toast-background: #fff;
    --toastify-toast-min-height: 64px;
    --toastify-toast-max-height: 800px;
    --toastify-font-family: sans-serif;
    --toastify-z-index: 9999;
    --toastify-text-color-light: #757575;
    --toastify-text-color-dark: #fff;
    --toastify-text-color-info: #fff;
    --toastify-text-color-success: #fff;
    --toastify-text-color-warning: #fff;
    --toastify-text-color-error: #fff;
    --toastify-spinner-color: #616161;
    --toastify-spinner-color-empty-area: #e0e0e0;
    --toastify-color-progress-light: linear-gradient(
    to right,
    #4cd964,
    #5ac8fa,
    #007aff,
    #34aadc,
    #5856d6,
    #ff2d55
  );
    --toastify-color-progress-dark: #bb86fc;
    --toastify-color-progress-info: var(--toastify-color-info);
    --toastify-color-progress-success: var(--toastify-color-success);
    --toastify-color-progress-warning: var(--toastify-color-warning);
    --toastify-color-progress-error: var(--toastify-color-error);
    line-height: inherit;
    font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
    Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
    border-width: 0;
    border-style: solid;
    border-color: #e5e7eb;
    --tw-border-spacing-x: 0;
    --tw-border-spacing-y: 0;
    --tw-translate-x: 0;
    --tw-translate-y: 0;
    --tw-rotate: 0;
    --tw-skew-x: 0;
    --tw-skew-y: 0;
    --tw-scale-x: 1;
    --tw-scale-y: 1;
    --tw-pan-x: ;
    --tw-pan-y: ;
    --tw-pinch-zoom: ;
    --tw-scroll-snap-strictness: proximity;
    --tw-ordinal: ;
    --tw-slashed-zero: ;
    --tw-numeric-figure: ;
    --tw-numeric-spacing: ;
    --tw-numeric-fraction: ;
    --tw-ring-inset: ;
    --tw-ring-offset-width: 0px;
    --tw-ring-offset-color: #fff;
    --tw-ring-color: rgb(59 130 246 / 0.5);
    --tw-ring-offset-shadow: 0 0 #0000;
    --tw-ring-shadow: 0 0 #0000;
    --tw-shadow: 0 0 #0000;
    --tw-shadow-colored: 0 0 #0000;
    --tw-blur: ;
    --tw-brightness: ;
    --tw-contrast: ;
    --tw-grayscale: ;
    --tw-hue-rotate: ;
    --tw-invert: ;
    --tw-saturate: ;
    --tw-sepia: ;
    --tw-drop-shadow: ;
    --tw-backdrop-blur: ;
    --tw-backdrop-brightness: ;
    --tw-backdrop-contrast: ;
    --tw-backdrop-grayscale: ;
    --tw-backdrop-hue-rotate: ;
    --tw-backdrop-invert: ;
    --tw-backdrop-opacity: ;
    --tw-backdrop-saturate: ;
    --tw-backdrop-sepia: ;
    box-sizing: border-box;

score 0 · Answer 2 · edited Aug 27 '23 at 16:02

I had the same issue. Couldn't find a solution, so I just added a margin top to the toast emitter. (Note that I am using tailwind)

toast.success(text, {
   position: "top-right",
   autoClose: 3000,
   hideProgressBar: true,
   closeOnClick: true,
   pauseOnHover: true,
   draggable: true,
   progress: undefined,
   theme: "colored",
   className: "mt-16",
  });

You can do the same thing on the ToastContainer as well by adding a className.

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

2 Answers2