Blazor Issue with CSS Isolation

The solution to this issue is at the bottom of this page.

This is a sample project that reproduces an issue I am having where CSS Isolation is not working as expected in Blazor Server using some Radzen Blazor components.

You can see this in action by running the project and viewing the list on the main Index page. The list is a Radzen DataList component, and CSS styles for it are defined in the Index.razor.css file.

You can see in the Index.razor.css file I have the following CSS, but the rules applied to the .rz* classes have no effect:

/* 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;
}

In the wwwroot/css/site.css file I have the same CSS, but commented out. If I uncomment it, it applies the rules to the Radzen DataList as expected:

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

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

Problem screenshots

Here is what the page looks like when the CSS is applied from the Isolated CSS Index.razor.css file (not working properly):

Here is what the page looks like when the CSS is applied from the `wwwroot/css/site.css`` file (works as expected):

Reaching out for help

I have reached out to the Radzen team for help on their forums, as well as posted a question on Stack Overflow.

The solution

The Radzen team was able to provide me with a solution to this issue. 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 🙂

deadlydog/Blazor.Issue.CssIsolation

Blazor Issue with CSS Isolation

Problem screenshots

Reaching out for help

The solution