MudBlazor：Blazor Server顶部应用栏按钮显示异常排查与解决

API 探路者

2026-7-31

Blazor Server中MudBlazor按钮显示异常的修复方案

问题根源

Blazor Server项目不会自动引入MudBlazor的静态资源（样式和脚本），而Blazor WebAssembly模板默认完成了这一步，导致组件缺少样式支持，仅渲染出无样式的原始HTML结构。

修复步骤

引入MudBlazor样式
打开项目中的Pages/_Host.cshtml（.NET 5及更早版本）或Pages/_Layout.cshtml（.NET 6+版本），在<head>标签内添加：
```
<link href="_content/MudBlazor/MudBlazor.min.css" rel="stylesheet" />
```
引入MudBlazor脚本
在同一文件的</body>标签前添加：
```
<script src="_content/MudBlazor/MudBlazor.min.js"></script>
```
注册MudBlazor服务
打开Program.cs，在服务注册代码段中添加：
```
builder.Services.AddMudServices();
```

主题初始化检查
如果你使用了自定义主题（如代码中的currentTheme），确保已正确初始化主题对象，例如在布局组件的@code块中：

@code {
    private bool darkModeActive;
    private MudTheme currentTheme = new MudTheme();
    private string ButtonText = "测试按钮";

    private void ButtonOnClick()
    {
        // 按钮点击逻辑
    }
}