CssClass not working as other controls

[Willem]

Hi,

To customise toast I cannot create styles like with the calendar where you could create a style like this:

.myCss .e-toast-success {

background-color: blue;

}

Then if I change the style to:

.e-toast-success {

background-color: blue;

}

and set the CssClass property to "e-toast-success" it still doesn't work. I have to set the property to be !important like this:

.e-toast-success {

background-color: blue!important;

}

then only the property gets set and the toast gets formatted correctly.

It looks like there is no consistency between the different controllers and how CssClass works. It also makes no sense to set the styles for setting background colour like this:

.e-toast-container .e-toast {

    background-color: blue;

}

as this will set all toasts to blue, which is not very useful.

I am at the beginning of a personal project and thinking of using Synfusion because I can use it for free until I start making money, but at this stage, I am wondering if it is worth the effort when it looks like things are not working consistently across controls and this would possibly add to development time when things need to be researched first for different controls. I may be missing something so I hope someone can put me on the right direction.

[Priyanka Karthikeyan]

Hi Willem,

 

Thank you for reaching out to us.

 

To customize the toast notification, you can apply the styles provided below to meet your specific requirements. Please find the sample code attached for your reference.

 

 

<SfToast ID="toast_default" CssClass="MyCss" @ref="ToastObj" Title="Adaptive Tiles Meeting" Content="@ToastContent" Timeout="500000" Icon="e-meeting">

        <ToastPosition X="@ToastPosition"></ToastPosition>

    </SfToast>

<style>

    .MyCss.e-toast {

       background-color: blue;

    }

</style>

 

You can view a working example of this customization in the following sample:

Sample: https://blazorplayground.syncfusion.com/LNVfsXWSJdVOVIgP

 

For further information on customizing the appearance of the Toast component, please refer to the official documentation:

Style and appearance in Blazor Toast Component | Syncfusion

 

Regards,

Priyanka K

[Willem]

Thanks. But I still seem not to understand the custom styling. Your example works, but how would I for example format the e-toast-content as well. Lets say I need to make the font yellow, but only for the content but keep the e-toast background that has been set in your example. The link to the documentation I have found and read but it does not help when you want to be able to style different toast messages. For example, I need to have one style I want to use when it is successful, background may be blue and I want to change the content color to yellow but also change the title text many to a bold and colour of greed. This is just an example. I must be missing something as I don't seem to be able to get this to work and the documentation isn't helpful to be honest.

I was trying something like this: 

.MyCss.e-toast {

    background-color: blue;

}

.MyCss.e-toast.e-toast-message.e-toast-title {

    color: red;

}

But have been unable to get this to work.

[Priyanka Karthikeyan]

Hi Willem,

 

Thank you for the update. We’d like to clarify the usage of styles with the Syncfusion Toast component. To correctly apply styles, it’s important to add a space between the .e-toast-message and .e-toast-title classes. This is because these two classes belong to different elements in the DOM structure. When you’re applying classes to different elements, separating them with a space is necessary for targeting those elements correctly.

 

However, if you’re applying multiple classes to the same element, there’s no need for a space in between. Below is an example of the DOM structure to illustrate this more clearly:

 

 

Here's the corresponding CSS you can use:

<style>

.MyCss.e-toast .e-toast-message .e-toast-title {

 

    color: green;

    fontWeight: bold;

 

}

.MyCss.e-toast .e-toast-message .e-toast-content {

 

    color: yellow;

 

}

</style>

 

Sample: https://blazorplayground.syncfusion.com/VZLJCjicAmPxtlGO

 

Regards,

Priyanka K