CODEWITHSUNDEEP
cssblazorblazor-webassemblyrazor-class-library
Neil W
Neil W

Reputation: 9112

Blazor Component in Razor Class Library (CSS Isolation)

I have created a component:

MyComponent.razor

and added a css file:

MyComponent.razor.css

The css file nested under the component file in Visual Studio, so I know there are no spelling mistakes. This is in a Razor class library.

I was getting odd behaviour which I tracked down to a class-name clash with a bootstrap class, which is also loaded in my Index.cshtml file.

I renamed my class names in my component to avoid the clash and everything worked as I expected.

But, my understanding was using this naming convention for css file would mean that all class names in HTML and class names in CSS file would get this random b-?????????? suffix/attribute to avoid such name clashes.

Have I misunderstood CSS Isolation?

Upvotes: 0

Views: 1995

Answers (2)

Brian Parker
Brian Parker

Reputation: 14523

CSS isolation only applies to .razor pages so selectors will still find the subcomponents without ::deep from other .css files

Upvotes: 1

Mike
Mike

Reputation: 63

The docs say that

For each styled component, an HTML attribute is appended with the format b-<10-character-string>.

You can inspect the {Project Name}.styles.css file in your browser to see the generated css, like

h1[b-3xxtam6d07] {
    color: brown;
}

Be sure to include ::deep so the CSS reaches child components of MyComponent.

Here is the source: https://learn.microsoft.com/en-us/aspnet/core/blazor/components/css-isolation?view=aspnetcore-5.0#css-isolation-bundling

Upvotes: 2

Related Questions