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}
/>

[eriks-studio]

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.