Reports

I ran into this same problem and was able to resolve it by approaching the problem from a different angle. Instead of calling toast.custom() I call toast() and change the style of the normal toasts to not interfere with the custom content I want to display. This leaves the default animations in place.

First I added a custom class to all toasts via the toastOptions prop on the always-present <Toaster /> element.

<Toaster
  toastOptions={{
    className: 'react-hot-toast'
  }}
/>

I then targeted that custom class with CSS selectors to override the style of the default toast. In my case this required removing the margins and padding of the original toast and it's child element.

.react-hot-toast, .react-hot-toast > * {
  margin: 0 !important;
  padding: 0 !important;
}

Depending on the style of the content you want to display you may also need to set the background-color, border-radius, or other properties that conflict with the style of your custom JSX.

79614952