search

ardeora / solid-toast

Customizable Toast Notifications for SolidJS
https://www.solid-toast.com
MIT License
813 stars 24 forks source link

Customize toast #88

Open jacksonsophat opened 1 year ago

jacksonsophat commented 1 year ago

This isn't an issue, just a question.

How can I customize a toast globally? For example, change the background color that can work across the app?

Thank you!

ardeora commented 1 year ago

Hello! https://github.com/ardeora/solid-toast#available-options-1 Does this help? You can set background color of the toast globally on the <Toaster /> component. Or do you mean when using toast.custom()?

jacksonsophat commented 1 year ago

I don't think that would work the way I want it. I want to have border red for error and green for success globally. Hope I make sense.

gxanshu commented 1 year ago

as i noticed by inspecting the the documentation site i realized that you can get your desirable result with global CSS customization here is a example bellow.

i noticed that the div of toast uses the sldt-active class so we can selected toast with following code.

/** just a example **/
.sldt-active > div {
  border-color: red;
  border-width: 2px;
}