How to remove inherent padding?

[salieflewis]

Describe the feature / bug 📝:

I'm styling my Sonner component via classnames, and they don't take up the same amount of width as the default styles. Essentially the default styles have too much horizontal padding. If I remove the default padding by adding a class such as w-fit the toasts that fire don't appear centered anymore.

For further context, the toasts are configured in my root layout to be bottom-center.

[NaveenkumarMD]

There is a way to render your custom components . Customize this in your own way

toast.message(<MyComponent/>)

[salieflewis]

There is a way to render your custom components . Customize this in your own way

toast.message(<MyComponent/>)

In my experience, doing this causes the positioning classes to work inaccurately.

[atsixian]

You can use className prop on Toaster which adds styles to the outermost ol tag, instead of toastOptions.classNames. What I did was adding w-full and flex to center the inner toasts.

See live demo.

toast(<CustomToast />)

<Toaster
  position="bottom-center"
  className="w-full flex items-center justify-center"
  toastOptions={{
    unstyled: true,
  }}
/>