Apply DaisyUI Theme to React Hot Toast Alerts

Question

I'm using NextJS, DaisyUI, and React Hot Toast. However, the alerts from React Hot Toast do not have the theme from DaisyUI applied to them. The theme works everywhere else.

Here's my current JSX:

<div id="mainDiv" data-theme={theme}>
      {/* None of the DaisyUI Toast styling seems to work, so toasts aren't affected by your theme*/}
      <Toaster containerClassName='toast toast-top toast-start' position="top-right" toastOptions={{
        className: "alert alert-info",
        success: {
          className: "alert alert-success",
        },
        error: {
          className: "alert alert-danger",
        },
      }}/>
      {session ? <Navbar {...{session, theme}}/> : ""}
      <Component {...{session, pageProps}} />
    </div>

For reference, theme comes from:

const [theme, setTheme] = useState('dark');

useEffect(() => {
    setTheme(localStorage.getItem('theme') || 'dark');
}, []);

However, I still get the basic white notifications from React Hot Toast. I've checked in the inspect menu and the Toaster element has the proper classes from DaisyUI and so do the notifications, all of which is inside the element with data-theme.

Anyone know why this is happening and how to fix it?

Apply DaisyUI Theme to React Hot Toast Alerts

0 Answers0