Live Chat Icon For mobile
Live Chat Icon

How do I use different CSS files in Blazor pages?

Platform: Blazor| Category : General, Tips and Tricks

In Blazor, there are three ways to use different CSS files in different pages .

1. Use inline <style></style> tag to define the custom styling for the page.

2. Include a new CSS file in the page by using a JavaScript interop in the OnInitialized method.

[script.js]

function includeCss() {
     var element = document.createElement("link");
     element.setAttribute("rel", "stylesheet");
     element.setAttribute("type", "text/css");
     element.setAttribute("href", "css/external.css");//location of the css that we want     include for the page
     document.getElementsByTagName("head")[0].appendChild(element);
}
[index.razor]

@page “/”

<h1>Blazor Application</h1>

@code{
    protected override async void OnInitialized()
    {
        await JSRuntime.InvokeAsync<object>("includeCss");
     }
    }

3. Usedirect links of the CSS file via the <link> HTML element with its local or online reference in the href attribute.

<link href="StyleSheet.css" rel="stylesheet" />

Share with

Related FAQs

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

Please submit your question and answer.