Blazor CSS isolation is a process that occurs at build time. By utilizing CSS isolation, you can restrict the scope of CSS files or styles to specific components within your app, preventing them from affecting other components globally. The CSS selectors are rewritten by Blazor to match markup rendered by the component. These rewritten CSS files are loaded as static assets in the {{Your_App_Name}}.styles.css.
The static file name is referenced inside the tag of the _Host.cshtml file.
[_Host.cshtml] / [index.html]
<head>
// . . .
<link href="{{Your_App_Name}}.styles.css" rel="stylesheet" />
</head>Create a Blazor Server or WebAssembly application.
To enable CSS isolation, create a razor.css file matching the .razor file for the component in the same folder.
For example, if your component is named “Isolate.razor,” create a file alongside the component named “Isolate.razor.css.” The Isolate.razor.css file is placed in the same folder as the Isolate.razor component.
[Pages/Isolate.razor]
[Pages/Isolate.razor.css]@page "/isolate"
<h1>Hello, World</h1>
<p>Welcome to your new app</p>
The Isolate.razor.css styles work only for the Isolate.razor component. Refer to this documentation for more details. View Sample in GitHubh1 {
color: blue;
font-style: italic;
text-shadow: 2px 2px 2px gray;
}
Share with