Blazor not generating matching scoped CSS selector in html markup of compiled razor page

Question

My Blazor build (ASP.NET Core 9.0, VS 2022) is correctly generating the scoped selectors for isolated CSS:

Program.cs:

builder.WebHost.UseStaticWebAssets();

App.razor <head> tag:

<link rel="stylesheet" href="MyAssemblyName.styles.css" />

MainLayout.razor:

<AppBar class="test-class"></AppBar>

The AppBar.razor.css part compiled into MyAssemblyName.styles.css:

.test-class[b-rx6ij8vkro] {
    color: red;
    background-color: aquamarine;
}

So far so good, I have the b-rx6ij8vkro selector. However, here's the generated html:

<header class="mud-appbar mud-appbar-fixed-top mud-elevation-0 test-class">

No b-rx6ij8vkro selector on the header tag. Moreover, no selectors are generated for any other tags in the html file!

How do I generate the correct html?

Escher · Accepted Answer · 2025-03-05 00:03:35Z

1

I was using Mudblazor, and isolated CSS identifiers are only generated on plain html markup. Therefore, you have to wrap your styled components in a <div class="test-class"> etc.

answered Mar 5 at 0:03

Escher

5,83512 gold badges62 silver badges110 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Gary O. Stenstrom Jun 12 at 3:58

I am experiencing this same issue with Telerik UI for Blazor controls. The CSS identifiers will not be added to HTML created by the Telerik UI library only those that are added directly to the code.

Ruikai Feng · Accepted Answer · 2025-03-04 07:04:43Z

-1

You may try

::deep .test-class{
    color: red;
    background-color: aquamarine;
}

in MainLayout.razor.css

as stated in this document:

CSS isolation only applies to the component you associate with the format {COMPONENT NAME}.razor.css, where the {COMPONENT NAME} placeholder is usually the component name. To apply changes to a child component, use the ::deep pseudo-element to any descendant elements in the parent component's .razor.css file. The ::deep pseudo-element selects elements that are descendants of an element's generated scope identifier.

answered Mar 4 at 7:04

Ruikai Feng

12.5k1 gold badge7 silver badges16 bronze badges

1 Comment

Escher Mar 4 at 10:17

This answer doesn't address the question properly: the point is to get isolated CSS working on the child css file, not to put all the child CSS in the parent's css and then use the ::deep selector.

Collectives™ on Stack Overflow

Blazor not generating matching scoped CSS selector in html markup of compiled razor page

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related