Make custom toast components clickable and ease style customization

[artemfomin]

Hi guys.

Despite whatever I write below thank you for the component) Great Job)

However I haven't found a suitable method in ToastService neither any reference how to add click action to ShowToast<TComponent>(ToastParameters parameters, ToastInstanceSettings settings). Would be userful to add some.

P.S.> FYI: Experienced multiple issues with CSS:

• Container size cannot be changed using minified CSS and preserving app clean code styles. Probably it can be moved to settings as a class override same as Success/Warning/etc overrrides;
• Overriding CSS class works but still meets a lot of conflicts as base style in priority. As a suggestion: overriding class should replace initial rather than adding one more;

[chrissainty]

In the sample project, there is an example of a toast with an on click event:

Toast/samples/BlazorWebAssembly/Pages/Index.razor

Line 12 in beafa60

<button class="btn btn-info" @onclick="@(() => toastService.ShowInfo("Click to refresh the page", "Click me!", () => { NavigationManager.NavigateTo("/", true); }))">

Container size cannot be changed using minified CSS and preserving app clean code styles. Probably it can be moved to settings as a class override same as Success/Warning/etc overrrides;

I'm not sure what you mean by "preserving app clean code styles", but the CSS styles can most definitely be overridden regardless of the fact it's minimised. What have you tried?

Overriding CSS class works but still meets a lot of conflicts as base style in priority. As a suggestion: overriding class should replace initial rather than adding one more;

This seems to contradict your first point, as you are saying you can override styles? Sorry bit confused by that. Can you clarify? Once again, what have you tried, what isn't working?

[artemfomin]

I'm not sure what you mean by "preserving app clean code styles", but the CSS styles can most definitely be overridden regardless of the fact it's minimised. What have you tried?

I created my CSS class that was expected to override styles from initial one but most of the properties were set from initial. No font style/size has changed yet I clearly see that my class is added to the element. Apologies for not brinnging an exact piece of code - already made it completely different way. Speaking about clean CSS code I mean mostly avoiding !important suffixes and SonarQube base CSS rules. And about container size - overriden style is set to container's child element so container itself stays unchanged. I still keep in mind that it might be the fault of my app's styling somewhere, but doesn't look like - I use Blazor isolated styles

[chrissainty]

I'm sorry but I can't really help without some example of what you've done. Here are some things to think about.

• If you're using Blazor isolated CSS that could be the problem. You would need to use the ::deep psudo element.
• Have you referenced your stylesheet after the Blazored Toast one?
• Have you made your overrides specific enough?