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

mRizvandi

2020-12-22

1327

嗨，每个 Blazor 爱好者！

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

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

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

ASP.NET Core 3.1 或 .NET 5.0

提前致谢。

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

原文答案

mRizvandi

2022-01-16

原文

接受的答案

用于.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");
    }

答案:

user3071284

2020-12-23 1 原文

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

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

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

答案:

相关问题

标签