Overriding CSS for single toast()

[jukkahuuskonen]

Feature-request (or info on how to implement if already available) At the moment I am using notistack for my toasts (snackBars), but since it has been pretty much not maintained for nearly 2 years I am planning to migrate to react-toastify Our app has some toasts with custom react-components, mostly error messages. In these cases we don't want any extra padding around our component. With other components that padding is just fine. Is there there a way to override the CSS for a single toast? We would want to override following 2 parts:

.Toastify__toast {
...
padding: 8px; -> padding: 0px
...
}

.Toastify__toast-body {
...
padding: 8px; -> padding: 0px

...
}

What is the current behavior? The two upper toasts are just fine, but with the bottom one we don't want the padding at all:

The bottom one should look like this:

If I just override the CSS for the (using emotion) it would also change those first 2 toasts and I don't want that.

Is there any easy way to do this toast-by-toast? Or maybe have the library to just show the custom component without those extra divs around it?

[jukkahuuskonen]

Can the white background be changed separately for each type: info/success/warning/error because that would probably be fine too? As far as I saw, it looked like there is only one background color variable.

[jukkahuuskonen]

Ok, I found the colored-theme that gives an acceptable solution to this.