Blazor 动态设置 CSS 文件答案

【问题标题】：Blazor dynamically set CSS fileBlazor 动态设置 CSS 文件
【发布时间】：2019-11-29 12:17:40
【问题描述】：

我正在寻找一个想法来覆盖“_Host”文件中的 css 文件路径以使其动态（属于用于访问 Blazor 网页的域）。

在 dotnet core 3.0 中使用服务器端 Blazor

有谁知道如何在运行时覆盖 CSS？

谢谢！

【问题讨论】：

标签： blazor

【解决方案1】：

请参阅下面的注释示例代码。基本上，在代码中（在_host.cshtml 中内联或更好地在帮助程序类中）确定要根据当前 URL 使用哪个 css 文件。然后在<head>链接对应的css样式表。

_Host.cshtml：

@page "/"
@namespace TestServerSideBlazor20191125.Pages
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
@{
    Layout = null;

    // sniff the domain, adjust as needed
    string domainName = Request.Host.Host;
    
    // determine the name of the css file based on the domain
    string cssFile = domainName switch
    {
        "my.domain.com" => "StyleBlue.css",
        "localhost" => "StyleGreen.css",
        _ => "StyleDefault.css"
    };
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>TestServerSideBlazor20191125</title>
    <base href="~/" />
    <link rel="stylesheet" href="css/bootstrap/bootstrap.min.css" />
    <link href="css/site.css" rel="stylesheet" />

    @*link the css file using the cssFile variable defined earlier*@
    <link href="css/@cssFile" rel="stylesheet" />
</head>
<body>
    <app>
        <component type="typeof(App)" render-mode="ServerPrerendered" />
    </app>

    <div id="blazor-error-ui">
        <environment include="Staging,Production">
            An error has occurred. This application may no longer respond until reloaded.
        </environment>
        <environment include="Development">
            An unhandled exception has occurred. See browser dev tools for details.
        </environment>
        <a href="" class="reload">Reload</a>
        <a class="dismiss">?</a>
    </div>

    <script src="_framework/blazor.server.js"></script>
</body>
</html>

2020 年 10 月 14 日编辑：.NET 5（现在发布候选版本）将支持控制 head 元素的内容。见https://devblogs.microsoft.com/aspnet/asp-net-core-updates-in-net-5-preview-8/#influencing-the-html-head-in-blazor-apps

【讨论】：

这是一个不错的方法，但是，当从一个页面导航到另一个页面时需要加载不同的 CSS 文件时，它并不适用。例如，如果您有主布局和管理布局，这将如何实现 - 分别切换 CSS 文件？我注意到分别在布局文件中直接加载不同的 CSS 文件时出现延迟。这在没有 JS 的情况下可以实现吗？有任何想法吗？提前致谢！