Blazor集成Ant Design仅需三步:安装AntDesign NuGet包、在Program.cs中调用builder.Services.AddAntDesign()注册服务、在App.razor末尾添加容器;支持.NET 6+,自动注入CSS/JS,无需手动配置。

Blazor 集成 Ant Design Blazor 很直接,核心就三步:装包、注册服务、加组件容器。不需要改底层框架,也不用写大量胶水代码,官方支持完善,.NET 6 及以上都能用。
安装 AntDesign NuGet 包
在项目根目录运行命令(推荐用 .NET CLI):
- 如果是新项目,先创建:
dotnet new blazorwasm -o MyApp或dotnet new blazorserver -o MyApp - 再添加包:
dotnet add package AntDesign - 国内用户可指定源加速:
dotnet add package AntDesign --source https://nuget.cnblogs.com/v3/index.json
安装后会自动引入 CSS 和 JS 资源(0.17.0+ 版本支持 JS 初始化器自动注入,无需手动加 script 标签)。
在 Program.cs 中注册服务
打开 Program.cs,在构建 host 的地方加入两行关键配置:
-
builder.Services.AddAntDesign();—— 启用全部 Ant Design 组件和主题支持 - (可选但推荐)
builder.Services.AddScoped和(); INotificationService等,用于弹窗提示
注意:Server 项目和 WebAssembly 项目都用同一套注册方式,无需区分。
在 App.razor 中添加 AntContainer
这是渲染 Ant Design 组件的必要根容器,否则部分组件(如 Tooltip、Dropdown、Modal)可能无法正确挂载或定位:
- 在
App.razor文件末尾(后面)加上: - 确保它和
处于同一层级,且有交互渲染模式(如@rendermode="RenderMode.InteractiveAuto")
不加这个容器,菜单下拉、气泡提示等浮层类组件大概率失效或错位。
补充:_Imports.razor 和样式引用
为了让组件在任意 .razor 文件中直接使用,别忘了在 _Imports.razor 里加一行:
如果用的是旧版(wwwroot/index.html(WASM)或 _Host.cshtml(Server)里引入资源:
新版基本不用管——包安装后自动处理。
基本上就这些。跑起来后,就能直接用 、 这类组件了,样式和交互都开箱即用。










