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

CleanShot.2024-03-25.at.08.47.03.mp4

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