Blazor 怎么使用 Blazorise 组件库

Blazor 使用 Blazorise 组件库需三步：安装 NuGet 包（如 Blazorise.Bootstrap5）、在 Program.cs 注册服务并配置样式链接顺序、在 .razor 文件中用 C# 语法调用组件（如 ），全程无需手写 JS 或 CSS。

Blazor 使用 Blazorise 组件库，核心就三步：装包、配样式与服务、写组件。它不强制绑定某套 CSS 框架，但你得选一个（比如 Bootstrap 5 或 Tailwind），然后按对应方式接入。整个过程用 C# 主导，基本不用碰 JavaScript 或手写 CSS。

安装 NuGet 包并选好 CSS 框架

Blazorise 支持多个前端样式体系，常见选择有 Bootstrap 5、Tailwind、Ant Design 等。以最常用的 Bootstrap 5 为例：

• 运行命令安装主库和 Bootstrap 适配器：dotnet add package Blazorise.Bootstrap5
• 再加图标支持（可选但推荐）：dotnet add package Blazorise.Icons.FontAwesome
• 如果你用的是 WebAssembly 项目，记得在 wwwroot/index.html 的 里引入 Bootstrap 和 Blazorise 样式链接
• 如果是 Server 项目，则加到 Pages/_Host.cshtml 的 中

注册服务和配置提供者

在 Program.cs（.NET 6+）中完成服务注册：

• 引用命名空间：using Blazorise; 和 using Blazorise.Bootstrap5;
• 调用扩展方法：builder.Services.AddBlazorise().AddBootstrap5Providers();
• 确保已启用静态文件中间件：app.UseStaticFiles();（尤其 WebAssembly 项目不能漏）

在页面中使用组件

Blazorise 组件名首字母大写（如 <button></button>），区别于原生 HTML 标签（<button></button>）。用法接近标准 Razor 语法：

JoinMC智能客服

JoinMC智能客服，帮您熬夜加班，7X24小时全天候智能回复用户消息，自动维护媒体主页，全平台渠道集成管理，电商物流平台一键绑定，让您出海轻松无忧！

193

查看详情

• 在 .razor 文件顶部加 @using Blazorise（或统一写进 _Imports.razor）
• 直接写组件，比如：<button color="Color.Primary">点我</button>
• 表单类组件支持双向绑定，例如：<textedit></textedit>
• 富文本编辑器等高级组件需额外引入命名空间，如 @using Blazorise.RichTextEdit

注意几个易错点

实际跑起来时，这几个细节最容易卡住：

• CSS 链接顺序不能错：Bootstrap 样式必须在 Blazorise 样式之前加载
• JS 资源默认按需加载，但首次使用某些组件（如 Modal、DatePicker）可能报 JS 未初始化，检查是否漏了 app.UseStaticFiles()
• 单元测试要用 bUnit 时，得手动替换 IComponentActivator 实现，否则组件无法渲染
• 如果只用 Blazorise 的工具类（比如侧边栏逻辑），而不用 UI 组件，可以注册空提供者：services.AddEmptyProviders()

基本上就这些。配通一次后，后续新增页面几乎就是纯 C# + Razor 的体验，连 CSS 类名都不用记。

以上就是Blazor 怎么使用 Blazorise 组件库的详细内容，更多请关注php中文网其它相关文章！