sonner: Customization via className prop doesn't work

Neither when passing it to the <Toast /> component nor when using it inside the options of the toast() call does the className options do anything. Tested it with both Tailwind classes as well as my own globally defined ones. The style of the toast stays the same. style works though!

About this issue

Original URL
State: closed
Created a year ago
Reactions: 1
Comments: 16 (8 by maintainers)

Most upvoted comments

Tailwind example with higher selector specificity:

@layer base {
  [data-sonner-toaster][data-sonner-toaster] li {
    @apply bg-red-500;
  }
}

BorisZubchenko on Sep 23, 2023

You should try to use the style option as much as possible as that’s the easiest way to override the default styling, classes need a higher specificity level which can be achieved with !important or just adding more selectors for example. That’s not ideal when you are using Sonner with tailwind for example, but in that case you probably want to customize the toast even more (lose the default styling) which the headless option allows.

emilkowalski on Mar 11, 2023

Could you elaborate?

Using :where([data-sonner-toast]) instead of [data-sonner-toast] will allow consumers to easily override lib styles using CSS frameworks similar to tailwind or using their own classes because :where has 0 specificity, even if lib styles come later they will be overridden by consumer styles

joaom00 on Mar 1, 2023