如何在Blazor的App.razor中通过条件加载不同样式表

完全可以在Blazor应用里通过条件逻辑加载不同样式表，以下是几种在App.razor中实现的具体方式：

方式一：直接使用Blazor条件渲染语法 #

在head区域通过@if语句判断变量，按需加载对应样式表。假设存在控制逻辑的布尔变量IsUseCondition1Style：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <base href="/" />   
    @if (IsUseCondition1Style)
    {
        <link rel="stylesheet" href="condition1.min.css" />
    }
    else
    {
        <link rel="stylesheet" href="condition2.min.css" />
    }

    <!-- 其他固定样式链接 -->
    <HeadOutlet />
</head>

<body>
    <Routes />
    <!-- 页面内容 -->
</body>
</html>

需要在App.razor的代码段中定义变量（可替换为从用户设置或其他来源获取的值）：

@code {
    private bool IsUseCondition1Style = true;
}

方式二：动态绑定样式表路径 #

如果仅样式表文件名有差异，可直接通过变量动态拼接href属性：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <base href="/" />   
    <link rel="stylesheet" href="@($"{(IsUseCondition1Style ? "condition1" : "condition2")}.min.css")" />

    <!-- 其他固定样式链接 -->
    <HeadOutlet />
</head>

<body>
    <Routes />
    <!-- 页面内容 -->
</body>
</html>

关键注意点 #

• 确保样式表文件已放置在wwwroot目录下，或路径配置正确
• 若变量来自异步数据源，需在OnInitializedAsync生命周期方法中通过async/await初始化
• 运行时切换样式表只需修改变量，Blazor会自动触发组件重渲染完成样式切换

内容的提问来源于stack exchange，提问作者MX313