Styling

You can style toasts globally with toastOptions on <Toaster />, or individually with the toast() API.

Global styling

Pass style or className to toastOptions to style every toast rendered by that toaster.

Copy
import { Toaster } from 'react-stacked-toast/toaster';

<Toaster
  toastOptions={{
    style: {
      background: '#333',
      color: '#fff',
    },
    className: 'border border-red',
  }}
/>;

You can also style the viewport. The viewport is the fixed container that holds the toast stack.

Copy
<Toaster
  toastOptions={{
    viewportStyle: {
      border: '1px solid red',
    },
    viewportClassName: 'custom-viewport',
  }}
/>

Individual styling

Pass style or className to toast() to style one toast. Individual toast styles override matching toastOptions styles.

Copy
import toast from 'react-stacked-toast/toast';

toast({
  title: 'Hello',
  description: 'This is a toast',
  style: {
    background: '#333',
    color: '#fff',
  },
  className: 'border border-red',
});