Search code examples
cssblazorblazor-webassemblyrazor-class-library

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?

Solution

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