[bug]: The style overrides by shadcn for sonner are not working.

[anson0370]

Describe the bug

From the screenshot, it is evident that the styles added by shadcn have a lower priority than the inherent styles of sonner , and therefore cannot override them correctly.

Affected component/components

Sonner

How to reproduce

1. install shadcn/ui

style: default
baseColor: gray
cssVariable: false

2. install sonner by npx shadcn-ui@latest add sonner
3. use sonner in my project

Codesandbox/StackBlitz link

No response

Logs

No response

System Info

System: macOS 14.2.1
Browser: Arc Version 1.39.0 (48951) / Chromium Engine Version 124.0.6367.61

Before submitting

• [X] I've made research efforts and searched the documentation
• [X] I've searched for existing issues

[Phygon]

I think this issue started with the upgrade from sonner 1.4.3 to 1.4.41. In my project, I'm sticking to sonner 1.4.3 because the style override still works in that version.

[christian1koch]

I tried using 1.4.3 and still same issue :/

[sitenativedev]

the problem is still in production

[skyfenton]

I think I'm having this issue also, my popup didn't have a border style. Rolling back to 1.4.3 corrected the issue.

[code-xhyun]

1.5.0 is still same issue

[rohanbhangui]

@anson0370 | cc: @skyfenton @sitenativedev @christian1koch @Phygon @code-xhyun

Might be some help here: I actually ended up modifying my sonner ui component file. Simply by adding a few lines to the toast Classname I was able to get some of the old feel back:

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

type ToasterProps = React.ComponentProps<typeof Sonner>;

const Toaster = ({ ...props }: ToasterProps) => {
  const { theme = 'system' } = useTheme();

  return (
    <Sonner
      theme={theme as ToasterProps['theme']}
      className="toaster group"
      toastOptions={{
        classNames: {
          toast:
            'h-auto w-full p-4 rounded-md border group toast group-[.toaster]:bg-background group-[.toaster]:text-foreground group-[.toaster]:border-border group-[.toaster]:shadow-lg',
          description: 'group-[.toast]:text-muted-foreground',
          actionButton:
            'group-[.toast]:bg-primary group-[.toast]:text-primary-foreground',
          cancelButton:
            'group-[.toast]:bg-muted group-[.toast]:text-muted-foreground',
        },
      }}
      {...props}
    />
  );
};

export { Toaster };

What changed:

• classNames -> toast: add the following classes h-auto w-full p-4 rounded-md border

---

Its not perfect but it will get you some of the way there.

[SeaRoll]

Same here, using sonner and the styles that should be overridden is not

[Phygon]

So the other day I updated sonner to 1.5.0, as I could not reproduce the problem with any version.

Today my toasts had no border again: The sonner styling appears below the tailwind base styling. It seems to be an issue with the order in which the inline styles were loaded.

Does anyone know a similar issue with CSS files and inline styles with vite dev server?

[Pkcarreno]

As a workaround, you can use the “!” character before a tailwind class. Since the problem only affects the buttons (as far as I can see) you can use the following styles:

actionButton: 'group-[.toast]:!bg-primary group-[.toast]:!text-primary-foreground',
cancelButton: 'group-[.toast]:!bg-muted group-[.toast]:!text-muted-foreground',

Works in 1.5.0.

[Woofer21]

Make sure when you import Toaster in your project you import it from your shadcn components and NOT the sonner lib, I acidently did it from the sonner lib and was wondering why it was not working.

[nullnullsieben]

https://www.instagram.com/1900_officelle?igsh=MW5ueDI0b21qbW44Zg==

Woofer @.***> schrieb am Mo., 5. Aug. 2024, 03:32:

Make sure when you import Toaster in your project you import it from your shadcn components and NOT the sonner lib, I acidently did it from the sonner lib and was wondering why it was not working.

— Reply to this email directly, view it on GitHub https://github.com/shadcn-ui/ui/issues/3579#issuecomment-2268010251, or unsubscribe https://github.com/notifications/unsubscribe-auth/BIO77CJSZ2RPLQ5SWTMWEOLZP3I4PAVCNFSM6AAAAABGS77W6SVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDENRYGAYTAMRVGE . You are receiving this because you are subscribed to this thread.Message ID: @.***>

[Commando-Brando]

Just ran into this :( On Sonner version 1.5.0