set z index about react-hot-toast HOT 8 CLOSED

Yes, you can change the z-index, for both the container or the toasts.

<Toaster
  containerStyle={{
	 zIndex: 9999 // For the container
  }}
  toastOptions={{
    style: {
      zIndex: 9999 // For toasts
    },
  }}
/>

from react-hot-toast.

Got around it by lowering other z indexes.

from react-hot-toast.

However toast.custom()'s second parameter does not accept a containerStyle property:

The styles that I apply myself to the top-level DOM node that my <Notification /> component produces, does not help, as the container produced one level above, by react-hot-toast, sets a z-index: 9999, which I can't seem to override.

Even this doesn't work for me:

    toast.custom(<div style={{ zIndex: 20000, backgroundColor: 'red' }} />)

... The top level container of react-hot-toast keeps z-index: 9999.

from react-hot-toast.

It's actually way more complicated than it needs to be. I couldn't figure out a way to set up the default Toaster component to use a className or a style.

Essentially, you need to Portal the Toaster into the body, and then set the Toaster to have filter: unset. Since we can't supply a style/class to the Toaster, I put a div around it to get rid of the blur.

Relevant code:

    <Portal open>
      <div style={{ filter: "unset" }}>
        <Toaster />
      </div>
    </Portal>

Running example:
https://codesandbox.io/s/suir-dimmer-hot-toast-ek2nb?file=/index.js

from react-hot-toast.

What if you're using toast.custom() ? I still get a container with z-index: 9999, that I need to increase.

The style option doesn't seem to work. Probably we need a containerStyle option?

from react-hot-toast.

Yes, you can use container styles or manually add your zIndex to your custom component.

toast.custom(<div style={{ zIndex: 9999 }}> {/ * Custom* /} </div>)

from react-hot-toast.

If the container element that react-hot-toast adds to the body, had an id or class name, at least I could override it using some global CSS and !important. But it's pretty much unselectable through CSS:

from react-hot-toast.

However toast.custom()'s second parameter does not accept a containerStyle property:

The styles that I apply myself to the top-level DOM node that my <Notification /> component produces, does not help, as the container produced one level above, by react-hot-toast, sets a z-index: 9999, which I can't seem to override.

Even this doesn't work for me:

    toast.custom(<div style={{ zIndex: 20000, backgroundColor: 'red' }} />)

... The top level container of react-hot-toast keeps z-index: 9999.

Were you able to get around this?

from react-hot-toast.