CODEWITHSUNDEEP
asp.net-coreblazorblazor-client-sideblazor-webassembly
mRizvandi
mRizvandi

Reputation: 1093

How to add different CSS files to different layouts in blazor?

Hi every blazor lover!

I have 2 different layouts and, I want to load different CSS file on each layout.

The first one is MainLayout.razor and the other is AdminLayout.razor.

I want to load my admin menu CSS file in the AdminLayout, without using "css isolation", because the CSS files for this layout maybe more files in future.

ASP.NET Core 3.1 or .NET 5.0

Thanks in advance.

Upvotes: 2

Views: 4035

Answers (3)

A Tsai Kao
A Tsai Kao

Reputation: 51

I found that it can also be done this way. Using HeadOutlet and HeadContent. The reference article is here: Control content in ASP.NET Core Blazor apps.

Upvotes: 0

mRizvandi
mRizvandi

Reputation: 1093

Solution for .Net 3.1 or .Net 5.0

use this java script to add css file to page or layout directly:

    function loadCss(cssPath) {
        var ss = document.styleSheets;
        for (var i = 0, max = ss.length; i < max; i++) {
            if (ss[i].href.includes(cssPath.substr(2)))
                return;
        }
        var link = document.createElement("link");
        link.rel = "stylesheet";
        link.href = cssPath;
    
        document.getElementsByTagName("head")[0].appendChild(link);
    }

I create a js function "loadCss", you have to call this function on OnAfterRenderAsync event:

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        await JsRuntime.InvokeVoidAsync("loadCss", "css/FILENAME.min.css");
    }

Upvotes: 1

user3071284
user3071284

Reputation: 7100

You can use the HTML <link> tag anywhere in the <head> or <body> to include CSS, so drop the appropriate <link rel="stylesheet" href="..." /> into MainLayout.razor and AdminLayout.razor, respectively.

Eventually, adding content to the <head> directly from a razor component may be supported, as tracked here.

Upvotes: 1

Related Questions