Blazor 动态设置 CSS 文件

Question

Blazor 动态设置 CSS 文件

bae*_*999 4 blazor

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

将服务器端 Blazor 与 dotnet core 3.0 结合使用

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

谢谢！

Answer 1

rk7*_*k72 7

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

_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>

Run Code Online (Sandbox Code Playgroud)

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

归档时间：	6 年，5 月前
查看次数：	3785 次
最近记录：	5 年，7 月前