Close Button has transparent background until hovered

[brayden-wong]

Describe the feature / bug 📝:

When creating any type of toast message, the close button background color appears transparent until I hover over it. Note this only started happening on version 1.4.41

A temporary fix is to do the following toast.info("Notification received", { classNames: { closeButton: "bg-white" }, }); // using tailwind

Steps to reproduce the bug 🔁:

1. install version version 1.4.41

https://github.com/emilkowalski/sonner/assets/75548271/445074a8-efe4-4d9b-875c-9831851b929a

[Omkar-omi]

Insted of in-lining tailwind classes on every toast you can add closeButton: "group-[.toast]:bg-white" in the toastOptions,this way every toast will have the same style's.

<Sonner
  duration={5000}
  theme={"dark"}
  className="toaster group"
  toastOptions={{
    classNames: {
      toast:
        "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",   
+    closeButton: "group-[.toast]:bg-white",
    },
  }}
  {...props}
/>

[powdaze]

The issue arises due to the changes to styling made in #377 .

The button now gets styled with this portion of Tailwind's preflight css:

/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Remove default button styles.
*/

button,
input:where([type='button']),
input:where([type='reset']),
input:where([type='submit']) {
  -webkit-appearance: button; /* 1 */
  background-color: transparent; /* 2 */
  background-image: none; /* 2 */
}

Not exactly sure the proper fix, but the workaround mentioned above works for now.

[mfts]

Thanks @Omkar-omi for your hint.

Since many are using shadcn-ui for the sonner implementation: here's my fix that also restores the hover effect

<Sonner
    theme={theme as ToasterProps["theme"]}
    className="toaster group"
    toastOptions={{
      classNames: {
        toast:
            "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",
+        closeButton:
+         "group-[.toast]:bg-background group-[.toast]:border-border group-[.toast]:text-foreground group-[.toast]:hover:bg-muted ",
        },
      }}
      {...props}
    />