Cannot override Radzen Blazor component style from isolated CSS file

Question

I am using the Radzen Blazor components in my .NET 7 Blazor Server project. I am having an issue where styles applied to the Radzen components work if I put them in the global wwwroot/css/site.css file, but they do not work if I put them in the page's CSS isolation file (e.g. Index.razor.css). Other styles defined in the isolated CSS file work fine so I know the CSS isolation is setup correctly; just the styles for the Radzen components do not work.

I have created this small sample application that reproduces the issue. I am not sure if the issue is something wrong in the Blazor framework, something specific about how Radzen implements their component styling, or if I'm just missing something about how CSS styling is applied when using CSS isolation.

For example, I have this CSS code in the Index.razor.css file (.rz* rules do not get applied):

/* This gets applied properly, so I know the Isolated CSS file itself is being applied. */
p {
  color: red;
}

/* For some reason these do not work from the Isolated CSS file, but do work from the wwwroot/css/site.css file */
/* Even using "!important" seems to have no effect when in the Isolated CSS file. */
.rz-datalist-data {
  background-color: blue;
}

.rz-g > div, .rz-datalist-data > li {
  padding: 0rem !important;
}

If I define the .rz* rules in the wwwroot/css/site.css file though, they work properly:

/* When these rules below are applied in this file, they work fine. They do not work when defined in an Isolated CSS file though. */
.rz-datalist-data {
  background-color: blue;
}

.rz-g > div, .rz-datalist-data > li {
  padding: 0rem;
}

Most other similar questions were missing the <link href="[Your Project Name].styles.css" rel="stylesheet" /> in their _Host.cshtml file, but that is not my problem here, as I have added that and other styles in the isolated CSS file do work as expected.

Any ideas on why styling for some components would not work when using CSS isolation?

Update: I've found what sounds like the same problem on the Radzen forums and asked there as well.

Answer 1

The Radzen team was able to provide me with a solution to this issue. Brian Parker also left a comment on the question with a similar response. The issue is not specific to Radzen controls, but rather a general issue with Blazor CSS Isolation and child components.

The solution is to add the ::deep css pseudo-element in the Isolated CSS file to target the child components. So the CSS in the Index.razor.css file should be changed to:

::deep .rz-datalist-data {
  background-color: blue;
}

::deep .rz-g > div, ::deep .rz-datalist-data > li {
  padding: 0rem;
}

That alone is not enough to fix the issue though. We must also wrap the child control in an HTML element, such as a <div>, to get the generated CSS scope attribute. So we must change the HTML in the Index.razor file to:

<div>
  <RadzenDataList ...>
    ...
  </RadzenDataList>
</div>

Once both changes have been applied the CSS Isolation works as expected 🙂