Blazor 怎么使用 MudBlazor 组件库

来源:这里教程网 时间:2026-02-21 17:35:29 作者:

Blazor 使用 MudBlazor 组件库不难,关键在四步:装包、注册服务、引入样式脚本、添加基础组件。只要顺序对、路径准,几分钟就能跑起来。

安装 MudBlazor NuGet 包

在项目根目录打开终端,运行命令:

dotnet add package MudBlazor

如果是 .NET 6+ 项目(如 Blazor Server 或 WebAssembly),推荐用最新稳定版;也可在

.csproj
中手动添加:

注册服务与配置入口

Program.cs
(.NET 6+)中加入服务注册:

builder.Services.AddMudServices();

如果是旧版 Blazor Server(.NET 5),则在

Startup.cs
ConfigureServices
方法里写:

services.AddMudServices();

引入字体、CSS 和 JS 资源

根据项目类型,在对应 HTML 文件的

 中添加:

Google Roboto 字体(Material Design 必需) MudBlazor 样式文件
_content/MudBlazor/MudBlazor.min.css
MudBlazor 脚本文件
_content/MudBlazor/MudBlazor.min.js

例如 WebAssembly 的

wwwroot/index.html



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

在布局中添加核心提供器

打开

MainLayout.razor
(或
App.razor
),在最外层组件内添加三行:

—— 控制主题色和暗色模式 —— 支持弹窗组件 —— 支持底部提示条

别忘了在

_Imports.razor
里加命名空间:

@using MudBlazor

基本上就这些。之后就可以直接在任何

.razor
页面里写
<mudbutton></mudbutton>
<mudtextfield></mudtextfield>
这类组件了。

相关推荐