sonner: Default classNames are not working for other variants

'use client';

import { useTheme } from 'next-themes';
import { Toaster } from 'sonner';

export function ToastProvider() {
	const { theme } = useTheme();

	return (
		<Toaster
			toastOptions={{
				classNames: {
					toast: '!border-border',
				},
			}}
			theme={theme as 'light' | 'dark' | 'system'}
			richColors
		/>
	);
}

When the classNames for toast are changed then the error default styles are also changed even when the error styles are not being touched

About this issue

Original URL
State: open
Created 7 months ago
Comments: 15 (10 by maintainers)

Most upvoted comments

This is fixed in #324. You can now style with the default key, those styles will be overidden by any type specific ones.

Just a heads up that I pulled the latest version 1.4.1 and it seems the “error” variant is still using the background color as styled in either “toast” or “default”. The “success” variant is working correctly however.

I also wanted to say thank you for a wonderful toast component.

wadeamaral on Feb 24, 2024

This is fixed in #324. You can now style with the default key, those styles will be overidden by any type specific ones.

Just a heads up that I pulled the latest version 1.4.1 and it seems the “error” variant is still using the background color as styled in either “toast” or “default”. The “success” variant is working correctly however.

I also wanted to say thank you for a wonderful toast component.

I had the same issue and I realised that the issue was due to my class name for my error variant (bg-error-background) is before my default variant (bg-foreground) *Notice alphabet e comes before alphabet f.

The fix is to provide custom cn function via cn prop that includes tw-merge so that the ordering of the class name will be correct. If you are coming from shadcn, you can just do

'use client';

import { cn } from '@/lib/utils';

// ...

<Sonner
  // ...
  cn={cn}
  // ...
/>

Hopefully that helps!

junwen-k on Mar 26, 2024

This is fixed in #324. You can now style with the default key, those styles will be overidden by any type specific ones.

emilkowalski on Feb 3, 2024

However, applying classes to classNames.toast overwrites the variant styling.

export const Toaster = (props: ToasterProps) => (
  <Sonner.Toaster
    toastOptions={{
      classNames: {
        error: "bg-red",
        success: "bg-green",
        warning: "bg-yellow",
        info: "bg-blue",
        // This variant should be applied first in the chain, not last, so that any similarly defined style above takes precedence
        // Currently none of the other variants work as they will all appear white
        // toast: "bg-white",
      },
      unstyled: true,
    }}
    {...props}
  />
)

Do we have an update on this? This is pretty frustrating to work around. Intuitively any of the styling for the “variant” toasts (error, success, warning, info) should be applied after the “default” toast (toast).

wadeamaral on Feb 3, 2024