CSS Isolation

[Chadley08]

MatBlazor does not seem to support Blazor CSS isolation for its components.

Steps to reproduce:

0. Create a server side blazor project and add MatBlazor through nuget.
1. Create a NavMenu.razor component
2. Create a NavMenu.razor.css (isolated CSS) file
3. Add the <link href="{ProjectName}.styles.css" rel="stylesheet" /> to your _Hosts.cshtml file.
4. Create a <span class="testBlue">TEST BLUE</span> element in your NavMenu.razor file.
5. Create a <MatNavMenu></MatNavMenu> item in the NavMenu.razor component

The MatNavMenu component will generate html with a class called mdc-nav-menu. We want to override some of the styling for that class in the NavMenu.razor component so we will use isolated CSS.

6. In the NavMenu.razor.css file create a .mdc-nav-menu css class and set the color property to red.

• Also create a css class .testBlue class and set the color to blue.

-- What happens --
The Blazor CSS isolation is supposed to re-write the html classes with assigned identifier selectors, looks something like this after Blazor has generated the new CSS:

.mdc-nav-menu[b-1np9om4dnf] {
    margin: 50px !important;
}

Now with the more specific selector, the nav menu component element matching the matblazor class name "mdc-nav-menu" should have the styling applied. Blazor also changes your HTML classes to reference the new scoping identifier class for each component with isolated CSS.

However, for the MatBlazor components, the generated class in the HTML is missing the Blazor selector ID highlighted above and looks like this instead:

...class=mdc-nav-menu

Note it is missing the Blazor generated selector ID. This causes the isolated CSS styling to be ignored as it cannot find the matching selector in the generated HTML.

I do not think it should be missing that selector. I checked this using the span to make sure I had everything set up correctly and the span in the HTML had the scoped ID applied to it correctly and showed up with blue text.

I suspect MatBlazor is either ignoring the Blazor rewrite (either on purpose or on accident) or the timing from MatBlazor or the Blazor runtime is incorrect. (Or I could just be doing this completely wrong :)).

[Tailslide]

FYI the Telerik controls have the same issue. Their workaround is to add an enclosing tag that gets the ID and apply styles with ::deep

https://docs.telerik.com/blazor-ui/knowledge-base/common-css-isolation

[William Wilson]

I am having the same issue with my MatBlazor project. I consider it a "nice to have." My current workaround is to use a section in "app.css" for all MatBlazor-related CSS classes in the application.