-
Book Overview & Buying
-
Table Of Contents
Web Development with Blazor - Fourth Edition
By :
In .NET 5, Microsoft added something called isolated CSS. This is something that many other frameworks have as well. The idea is to write CSS specifically for one component. The upside, of course, is that the CSS that we create won't impact any of the other components.
The Blazor template already uses CSS isolation for Layout/MainLayout.razor and NavMenu.razor. If we expand MainLayout.razor, we will see a file called MainLayout.razor.css. The file appears nested because it follows the same naming convention.
We can also use SASS here by adding a file called MainLayout.razor.scss. The important thing is that the file we add should generate a file called MainLayout.razor.css for the compiler to pick up.
This naming convention will ensure that the CSS and the HTML output are rewritten.
CSS has the following naming convention:
main {
flex: 1;
}
It will be rewritten as follows:
main[b-bfl5h5967n] {
flex: 1;
}
This means the elements need to have an attribute called...