CssClass only works if class in same file

[Josh Davidson]

Hi, I think I have a bug for you in your blazor controls

If I have a control with a CssClass property, that property is only assigned if the class name exists in a <style></style> tag in the .razor file.

If I have the same class name in a xxx.razor.css file, the class it doesn't work.

I believe the reason is this. When the class name is in the <style></style> tags it is rendered as:

<style b-f51ya3szu3="">
    .right-border {
        border-right-style: solid !important;
        border-right-color: lightgray !important;
        border-right-width: thin !important;
        padding-right: 20px !important;
    }
</style>

However, if it is in the xxxx.razor.css file it is rendered as:

.right-border[b-f51ya3szu3] {
    border-right-style: solid !important;
    border-right-color: lightgray !important;
    border-right-width: thin !important;
    padding-right: 20px !important;
}

Something about the [b-f51ya3szu3] tag is screwing up the assignment of the class in the xxx.razor.css location.

[Yohapuja Selvakumaran]

Hi Josh Davidson,

Thank you for reaching out. We have validated you requirement and we have achieved the Css Isolation. Here, we've wrapped the Dataform component to the another HTML <div> element and utilized the ::deep selector to ensure that the styles are properly applied.

Here's the updated code snippet:

[Index.razor]

  

<div>

<SfDataForm ID="MyForm"

            Model="@EmployeeDetail">

    <FormValidator>

        <DataAnnotationsValidator></DataAnnotationsValidator>

    </FormValidator>

    <FormItems>

        <FormAutoGenerateItems></FormAutoGenerateItems>

    </FormItems>

</SfDataForm>

</div>

 

[Index.razor.css]

 

 

::deep .e-data-form {

    background-color: #e6f7ff;

    padding: 10px;

}

By incorporating these changes, we ensure that the Dataform and its associated styles function as expected within the application. We have also attached the runnable sample, kindly check it out.

For further details about CSS isolation and wrapping components inside parent elements, please refer to the following documentation:

Documentation:

https://blazor.syncfusion.com/documentation/datagrid/how-to/css-isolation-for-grid

https://learn.microsoft.com/en-us/aspnet/core/blazor/components/css-isolation?view=aspnetcore-5.0#child-component-support

We trust that these updates will enhance your experience with our application. If you have any further questions or require additional assistance, please don't hesitate to reach out to us.

Regards,

Yohapuja S

Attachment: Dataform_CssIsolation_ed7459c7.zip

[Josh Davidson]

Thank you for the quick response, I have confirmed that a <div></div> tag wrapper with the ::deep identifier in the xxx.razor.css file's class definition will work.

[Shereen Shajahan]

Hi Josh,

Please get back to us for assistance in the future.

Regards,

Shereen