Skip to main content

SSR and CSP

By default, when imported, the library injects the stylesheet automatically. This works well when your application is a Single Page Application (SPA).

When using server-side rendering, injecting the stylesheet at runtime can trigger a hydration warning. If you see that warning and want to silence it, import from react-toastify/unstyled and load the stylesheet yourself:

import { ToastContainer, toast } from "react-toastify/unstyled";
import 'react-toastify/ReactToastify.css';

Content Security Policy (CSP)​

If your environment enforces a strict Content Security Policy that forbids unsafe-inline styles, you have two options:

Option 1 — pass a nonce to ToastContainer​

Forward the same nonce your server sets in the Content-Security-Policy header. The library will attach it to the <style> tag it injects, so the stylesheet is accepted by the policy.

import { ToastContainer, toast } from "react-toastify";

function App({ nonce }: { nonce: string }) {
  return <ToastContainer nonce={nonce} />;
}

Option 2 — opt out of style injection​

Import from react-toastify/unstyled and load the stylesheet yourself (for example, via your bundler or a <link> tag you control). This entry point never injects a <style> element, so no nonce is needed.

import { ToastContainer, toast } from "react-toastify/unstyled";
import 'react-toastify/ReactToastify.css';

The nonce prop is ignored on the unstyled entry because nothing is injected at runtime.