装完就能用的关键三步是加包、注册服务、引入样式和脚本:先安装MudBlazor及Services包,再在Program.cs中调用AddMudServices()等方法,最后按项目类型配置CSS、JS及MudThemeProvider等全局组件。

装完就能用,关键在三步:加包、注册服务、引入样式和脚本。跳过任一环节都可能报错或 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)。
注入样式、脚本与全局组件
根据项目类型操作:
95Shop可以免费下载使用,是一款仿醉品商城网店系统,内置SEO优化,具有模块丰富、管理简洁直观,操作易用等特点,系统功能完整,运行速度较快,采用ASP.NET(C#)技术开发,配合SQL Serve2000数据库存储数据,运行环境为微软ASP.NET 2.0。95Shop官方网站定期开发新功能和维护升级。可以放心使用! 安装运行方法 1、下载软件压缩包; 2、将下载的软件压缩包解压缩,得到we
-
Blazor WebAssembly:在 wwwroot/index.html 的
中加字体和 CSS:
googleapis.com/css?family=Roboto:300,400,500,700&display=swap" rel="stylesheet" />
在底部加 JS:
-
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
运行后点击按钮,右下角应出现绿色提示 —— 成功了。
基本上就这些。不复杂但容易忽略细节,比如漏掉 MudThemeProvider 会导致主题色失效,漏掉 JS 文件图标会显示为方块。









