Styling

You can style your toast globally with toastOptions in <Toaster/> component or individually with toast() api.

Global styling

You either can pass style or className to toastOptions to style your toast globally.

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

You also can style the viewport. Viewport is the container of all toasts.

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

Individual styling

You can pass style or className to toast() api to style your toast individually. This will override toastOptions styling in <Toaster/> component.

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