【Blazor之关于组件库Ant Design of Blazor组件样式的修改】
文章目录
- 前言
- 一、Ant Design of Blazor是什么？
-
- ✨ 特性
- 官方文档
- 二、对组件库样式修改方法的总结
-
- 1.第一种就是查看所用组件的样式接口
- 2.第二种通过添加样式隔离完成对组件样式的修改
- 3.第三种是通过全局css完成对样式的修改
- 总结
前言
例如：我们在使用Blazor框架时为了节省时间提升效率会使用到Ant Design of Blazor组件库。在使用过程中我们会根据需求去修改样式，但是由于组件库里面的样式基本上都是封装好的，要想达到自己所需的效果，这时候就需要我们去修改样式。本文就介绍一下我在使用Ant Design of Blazor组件样式的修改的方法。
一、Ant Design of Blazor是什么？
是 Ant Design 的 Blazor 实现，开发和服务于企业级后台产品。
✨ 特性
- 提炼自企业级中后台产品的交互语言和视觉风格。
- 开箱即用的高质量 Razor 组件，可在多种托管方式共享。
- 支持基于 WebAssembly 的客户端和基于 SignalR 的服务端 UI 事件交互。
- 支持渐进式 Web 应用（PWA）
- 使用 C# 构建，多范式静态语言带来高效的开发体验。
- ⚙️ 基于 .NET Standard 2.1/.NET 5/.NET 6，可直接引用丰富的 .NET 类库。
- 可与已有的 ASP.NET Core MVC、Razor Pages 项目无缝集成。
- 基于 MIT 开源协议，.NET 基金会项目，商业应用免费。
官方文档
官方文档中已经很详细的讲解的了安装使用，下面附上官方文档地址：https://antblazor.com/zh-CN/docs/introduce
二、对组件库样式修改方法的总结
1.第一种就是查看所用组件的样式接口
组件库中有的组件的样式是有接口的，可以在接口中修改。其次也可以在组件中通过添加style在其中通过添加属性完成修改，一般组件都能在style中添加样式的宽高属性完成对样式的修改。若直接修改没有生效则使用以下第二种第三种方法修改。
2.第二种通过添加样式隔离完成对组件样式的修改
首先检查项目中在index.html中是否引入