如何在 blazor 中将不同的 CSS 文件添加到不同的布局中?

嗨,每个 Blazor 爱好者!

我有 2 个不同的布局,我想在每个布局上加载不同的 CSS 文件。

第一个是 MainLayout.razor,另一个是 AdminLayout.razor。

我想在 AdminLayout 中加载我的管理菜单 CSS 文件,而不使用“css 隔离”,因为此布局的 CSS 文件将来可能会有更多文件。

ASP.NET Core 3.1 或 .NET 5.0

提前致谢。

stack overflow How to add different CSS files to different layouts in blazor?
原文答案
author avatar

接受的答案

用于.NET 3.1或.NET 5.0 的解决方案

使用此Java脚本将CSS文件添加到页面或布局直接:

    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);
    }

我创建一个JS函数“ LoadCSS”,您必须在onafterRenderAsync事件上调用此函数:

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

答案:

作者头像

您可以在 <link><head> 中的任何位置使用 HTML <body> 标记来包含 CSS,因此将相应的 <link rel="stylesheet" href="..." /> 分别放入 MainLayout.razor 和 AdminLayout.razor。

最终,可能支持直接从 razor 组件向 <head> 添加内容,例如 tracked here