CSS Isolation not working with Radzen components

Radzen.Blazor Components
1

I'm trying to get CSS isolation to work with the Radzen Blazor components but it seems it is not implemented (correctly).

What I deduce from the rendered Blazor pages is that each tag in the HTML has an attribute which seems to be used as an id for the page. For instance:

<div b-tiop4w2rry="">

Where 'tiop4w2rry' is the page id. In the CSS that is generated by Blazor you can find these 'ids' in the selectors between squared brackets like this:

/* /Pages/SchedulingGroups.razor.rz.scp.css */
.rz-treenode-content-selected[b-tiop4w2rry] {
  background-color: transparent;
  color: #3A84C1;
}
.rz-treenode-content:not(.rz-treenode-content-selected):hover[b-tiop4w2rry] {
  background-color: transparent;
  color: #3A84C1;
}
body:not(.rz-default-scrollbars) [b-tiop4w2rry]::-webkit-scrollbar-thumb {
  border-width: 0px;
}

These 'ids' are missing on the element generated for Radzen and therefore the isolation is not working.

Is this a known issue or by design?

1 Like
2

I read in the MS Documentation that you can add the following to the project file:

  <ItemGroup>
    <None Update="Pages\SchedulingGroups.razor.css" CssScope="xxxx" />
  </ItemGroup>

Where 'xxxx' is your custom unique identifier. Blazor uses that instead of the default. But that doesn't help me either because the Radzen components don't allow the 'xxxx' attribute. Even tried adding via the @attributes keyword but the error stays the same (does not support 'xxxx' attribute).

3

I don't think CSS isolation works for third party libraries. It seems to only work for applications and their pages. Also your CSS selectors seem off. You probably need this:

[b-tiop4w2rry] .rz-treenode-content-selected {
  background-color: transparent;
  color: #3A84C1;
}

This will apply to children of elements that have the b-tiop4w2rry attribute.

4

My guess is that the Radzen components are created using the BuiltTree mechanism. There the ID attribute should be added and then it would work, I think.

The CSS shown is generated from the local SchedulingGroups.razor.css. The [] are added by the generation.

5

The source of the Radzen components is available here. They are using regular .razor files. There is no mechanism as far as I know to inject the custom attributes used by the CSS isolation. You can probably use ::deep as shown in the CSS isolation docs.

6

::deep works like a charm, Thanks.

7

Could you please provide an example. I am trying to figure out how to use deep. Thanks in advance.

8

The linked article contains examples of using ::deep.

9

I'm having what sounds like the same issue, but cannot get it to work when using ::deep or the CssScope identifier. I've created this sample application that reproduces the issue (GitHub - deadlydog/Blazor.Issue.CssIsolation: Testing to reproduce an issue with CSS Isolation and Radzen controls in Blazor Server), as well as asked the question on Stack Overflow (Cannot override Radzen Blazor component style from isolated CSS file - Stack Overflow). Any ideas on what I'm missing? If you could reproduce the fix in the sample application and tell me exactly what code to update to fix it, that would be greatly appreciated. Thanks!

10

When using ::deep Blazor outputs something like this:

[b-p6bayultok] .rz-datalist-data {
	background-color: blue;
}

This means that .rz-datalist-data must be inside an element that has b-p6bayultok as attribute. Wrapping the Radzen.Blazor comonents with a div solves the issue.

image
image3456×818 240 KB

image
image1816×258 43.3 KB

So you need to do two things:

  1. Wrap the Radzen.Blazor components in some element. This is needed to get the CSS scope attribute.
    <div>
   <RadzenDataList  ...>
   </RadzenDataList>
</div>
  2. Use ::deep.
    ::deep .rz-datalist-data {
  background-color: blue;
}

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

Ah, thank you so much. I had added ::deep as you showed in 2., but had not wrapped my Radzen component in an html element (e.g. a < div >). That worked perfect. Thanks!