asp.net core - Blazor not generating matching scoped CSS selector in html markup of compiled razor page - Stack Overflow

admin2025-04-19 0

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?

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?

Share Improve this question edited Mar 10 at 1:32 Zhi Lv 22k1 gold badge27 silver badges37 bronze badges asked Mar 4 at 3:31 Escher 5,82512 gold badges61 silver badges110 bronze badges

Add a comment |

2 Answers 2

Sorted by: Reset to default 0

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.

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.

转载请注明原文地址:http://conceptsofalgorithm.com/Algorithm/1745062663a282793.html

最新回复(0)