How to add a custom class without replacing 'toast'?

Sorry if this is answered somewhere, but I want to add some custom styles to an individual toast popup (e.g. increase width). I see the toastClass config option - but this replaces the toast class which has essential styles applied to it (from bootstrap styles).

Is the only way to copy all the styles attached to .toast into my own custom class?

[trevor-hackett]

In CSS you can add your own .toast class and add/override any CSS properties that you want.

@yarrgh Thanks, but that would apply to all my toasts. I'm wondering if I can target one specific toast (that is displaying HTML content) without affecting other toasts and without having to copy all the styles that are attached to the toast class.

[keljoundi]

I 2nd this. it would be very convenient to simply add styling in addition to the defaults. Copying all styles to a custom class still introduces errors for me such as the onTap and onAction events no longer firing

[umaqs]

This is a much-needed feature.
I need to show popups of different colours and one way to do that is, extend Toast component like in pink toast example but in my case, I would have to create 10 different custom components.

if there is any other way please let me know.

Thank you

[scttcper]

put 'yourclass ngx-toastr' for toastClass?

[umaqs]

@scttcper Thank you for the quick reply.

I tried adding my class with the property of background-color and toast class but it shows a toast with transparent background with no padding also close button and onTap action are not working.

However, if I use toastClass: my-class ngx-toastr`` it gives me a black toast but the rest of the properties are what I want.

Can you please suggest how can I use it in the correct manner.

Thank you very much in advance :)

[scttcper]

i had success by being more specific with the classes. could also try !important.

.yourclass.toast-success {
  background-color: blue;
}

[umaqs]

Thank you very much 👍

I have this working with the css you provided and then specifying toastClass: 'ngx-toastr toast-success yourclass'

As you can see I had to use both ngx-toasts and toast-success to make it work.

One more quick question, please.

I have to put my class in styles.css. I would want to move it to the component level css file, its the place I am calling toasterService.show() from. Is it possible to do so?

Once again thank you for the help!

[scttcper]

the toast is not inside the context of your component so scoped css would not be applied. custom toasts would be the closest you could get but would still require positioning styles applied globally

[axell9641]

Is there any way I can change the position of the toastr from within a component? I see the toastClass gets applied to the content, not the container.

[sami-colon]

i had success by being more specific with the classes. could also try !important.

.yourclass.toast-success {
  background-color: blue;
}

This worked like charm.

[lvilca-tekton]

I can't get this to work, I am trying this in my .ts file
I have imported the toastrService to it, then I use

this._toastrService.success('test','test',{toastClass:'yourclass ngx-toastr'})

In the same dir, I have an css file

.yourclass .toast-message {
    background-color: blue;
}

I don't see it blue, am I doing smth wrong?

[scttcper]

🎉 This issue has been resolved in version 16.0.2 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀