New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We鈥檒l occasionally send you account related emails.
Already on GitHub? Sign in to your account
Close Button has transparent background until hovered #384
Comments
Insted of in-lining tailwind classes on every toast you can add <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}
/> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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 馃攣:
CleanShot.2024-03-25.at.08.47.03.mp4
The text was updated successfully, but these errors were encountered: