Styling

You can style your notifications globally with the toastOptions inside the Toaster component, or for each notification manually.

Set default for all toasts

<Toaster
  toastOptions={{
    className: '',
    style: {
      border: '1px solid #713200',
      padding: '16px',
      color: '#713200',
    },
  }}
/>

Set default for specific types

<Toaster
  toastOptions={{
    success: {
      style: {
        background: 'green',
      },
    },
    error: {
      style: {
        background: 'red',
      },
    },
  }}
/>

Style per toast

toast('I have a border.', {
  style: {
    border: '1px solid black',
  },
});

Changing the offset

If you want to change the offset of your noticiations, add a margin to your toastOptions.

<Toaster
  toastOptions={{
    style: {
      margin: '50px',
    },
  }}
/>

Change icon color

All icon colors can be changed by supplying a iconTheme with a primary & secondary color.

<Toaster
  toastOptions={{
    success: {
      iconTheme: {
        primary: 'green',
        secondary: 'black',
      },
    },
  }}
/>