How to use CSS isolation in Blazor .net 5

CSS isolation allows you to have one CSS file for one .razor file and here is how to use it…

The idea is to have CSS classes that can only be accessed in a particular .razor file (Component or page). To achieve this you simply need to get the naming of files right. With that, both .razor and associated CSS file must be in the same folder.

For example:

Component1.razor

Component1.razor.css

You can see that the name has to match, but also the first extension must exist as well. You cannot do Component1.css, as it will not work.

--

--