set z index

I am currently using the modals provided by react semantic ui. There is a prop for a modal which makes the blurred. (https://react.semantic-ui.com/modules/modal/).

When I use it, my toasts won’t appear, they are “behind” the blurred content. Is there a way to set the z index on the toasts or make them available up front?

[timolins]

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
    },
  }}
/>

[jorisw]

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.