Blazor 怎么集成 Ant Design Blazor

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 里加一行：

@using AntDesign

如果用的是旧版（wwwroot/index.html（WASM）或 _Host.cshtml（Server）里引入资源：

新版基本不用管——包安装后自动处理。

基本上就这些。跑起来后，就能直接用 、

这类组件了，样式和交互都开箱即用。