Css not working in separate file. only works in razor page between style tags

[Pavel]

Hi Syncfusion Blazor team,

I'm having an issue with Syncfusion specific CSS not working when it is put into a CSS code behind file (ExampleRazorPage.razor.css). The style only works when it is included in the razor page between <style> tags.

I'm using the Syncfusion Blazor UI components in my project, and I want to organize all of the CSS in their own CSS files. However, when I do this, the Syncfusion specific CSS no longer works.

I have experienced the issue across alot of syncfusion components, including sf grid.

.e-grid .e-rowcell {
    font-size: 30px;
    width: auto;
}

Is this a known issue? Is there anything I can do to fix it?

Thanks,

[Monisha Saravanan]

Hi Pavel,

Greetings from Syncfusion.

Query: “I want to organize all of the CSS in their own CSS files. However, when I do this, the Syncfusion specific CSS no longer works.”

We suggest you to wrap the SfGrid Component inside a HTML div element and then use the ::deep selector as like the below code snippet. We have already documented this topic in the below documentation section.

Kindly refer the attached sample and documentation for your reference.

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

::deep .e-grid .e-rowcell {

    font-size: 30px;

    width: auto;

}

 

Please let us know if you have any concerns.

Regards,

Monisha

Attachment: BlazorApp1_2c880442.zip

[Pavel]

Thank you for the reply, Looks like the grid is working correctly with the solution you provided.

However, when I try the same with the dialog component, it doesn't seem to work.

I want to change the dialog component header background color to black.

::deep .e-dialog .e-dlg-header {
background-color: black
​font-size: 20px;
​font-weight: normal;
}​

I have a custom css class defined on the dialog. 

 CssClass="WarningModal"

I tried things like but it still didn't work to change the background color of the header in the dialog.

::deep .WarningModal .e-dialog .e-dlg-header {
background-color: black
​font-size: 20px;
​font-weight: normal;
}​

[Monisha Saravanan]

Hi Pavel,

Welcome.

Query: However, when I try the same with the dialog component, it doesn't seem to work.”

Before proceeding further with your requirement could you please confirm us whether you are facing issue with standalone dialog component or are you facing with Grid Add/Edit dialog. Based on your confirmation we will check and share further details at our end.

[Pavel]

I'm facing the issue with the standalone dialog component. 

Thank you for your attention to this issue.

[Monisha Saravanan]

Hi Pavel,

Thanks for the information. We have branched your update in to new forum. Kindly follow the mentioned thread for future updates.