Live Chat Icon For mobile
Live Chat Icon

What is Blazor CSS isolation? How do you enable it for your application?

Platform: Blazor| Category: General

Blazor CSS isolation is a process that occurs at build time. By using CSS isolation, you can use CSS files or specific components in your app only and not 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 file.
[_Host.cshtml] / [index.html]

<head>
    // . . .
    <link href="{{Your_App_Name}}.styles.css" rel="stylesheet" />
</head>
Follow these steps to enable CSS isolation for a Blazor application.

  1. Create a Blazor Server or WebAssembly application.

  2. 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]

    @page "/isolate"
     
    <h1>Hello, World</h1>
    <p>Welcome to your new app</p>
    [Pages/Isolate.razor.css]
    h1 {
        color: blue;
        font-style: italic;
        text-shadow: 2px 2px 2px gray;
    }
    The Isolate.razor.css styles work only for the Isolate.razor component. Refer to this documentation for more details.  

Share with

Share on twitter
Share on facebook
Share on linkedin

Related FAQs

Couldn't find the FAQs you're looking for?

Please submit your question and answer.