MudBlazor 安装和基本使用方法

来源：这里教程网时间：2026-02-21 17:41:13 作者：

装完就能用，关键在三步：加包、注册服务、引入样式和脚本。跳过任一环节都可能报错或 UI 不渲染。

安装 MudBlazor 包

打开项目根目录，运行命令（按你项目类型选其一）：

Blazor Server 或 Blazor WebAssembly： dotnet add package MudBlazor 如需服务支持（比如 Snackbar、Dialog）：再加一个 dotnet add package MudBlazor.Services VS2022 用户也可右键项目 → “管理 NuGet 包” → 搜索 MudBlazor → 安装最新稳定版

注册服务与配置依赖

在 Program.cs（.NET 6+）中添加两行：

builder.Services.AddMudServices(); 若用到本地化，再加 builder.Services.AddMudBlazorTranslations();

注意：MudBlazor 不支持静态渲染（Static Rendering），确保你的组件使用的是 interactive 渲染模式（如

@rendermode InteractiveServer

或

InteractiveWebAssembly

）。

注入样式、脚本与全局组件

根据项目类型操作：

Blazor WebAssembly：在 wwwroot/index.html 的
中加字体和 CSS：

在
底部加 JS：
<script src="_content/MudBlazor/MudBlazor.min.<a%20style=" color: text-decoration:underline title="js" href="https://www.php.cn/zt/15802.html" target="_blank">js"></script> Blazor Server：在 Pages/_Layout.cshtml 的
中加同上 CSS 和字体；删掉或注释掉默认的
site.css
引用，避免样式冲突 在 App.razor 最外层组件内加入两个必备提供者：

写第一个 Mud 组件试试

比如在 Index.razor 里放个按钮和弹窗提示：

点我在 @code 块中加方法：
private void ShowSnackbar() => Snackbar.Add("Hello from MudBlazor!", Severity.Success); 别忘了在 @code 上方注入服务：
@inject ISnackbar Snackbar

运行后点击按钮，右下角应出现绿色提示 —— 成功了。

基本上就这些。不复杂但容易忽略细节，比如漏掉