前言
例如：我们在使用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中是否引入
<link href="{ASSEMBLY NAME}.styles.css" rel="stylesheet">
在修改样式时不能通过style中添加属性直接修改时也没有效果这时候只能通过样式隔离完成修改。在相应的组件名.razor.css文件中修改样式。
例如：在我们使用到的Tabs组件我们要是想修改Tabs页签的背景颜色大小是没有办法通过直接在style中添加属性修改样式。
因此我们先运行页面，在网页中通过检查元素，查看到需要修改的部分的css属性在相应的属性前添加 " ：：deep "
::deep .ant-tabs-card > .ant-tabs-nav .ant-tabs-tab-active,
.ant-tabs-card > div > .ant-tabs-nav .ant-tabs-tab-active {
color: #1890ff;
/*当前页签的背景*/
background: #2E3755;
border-radius: 6px 6px 0px 0px;
box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.35);
}
3.第三种是通过全局css完成对样式的修改
当使用样式隔离无法生效时则可以用全局样式来完成修改。对于组件Popconfirm 气泡确认框,Modal 对话框,Popover 气泡卡片等此类弹出框，是从最外部打开因此不能使用样式隔离，只能通过全局css完后对样式的修改。
首先在wwwroot/css目录下新增css文件
然后到index.html引入此css文件。
<link href="css/Sheet.css" rel="stylesheet" />
同样的方法在查看网页的元素去，通过元素查找到需要修改的属性，将属性复制到全局css中修改。将所需要修改的属性后面 “!important ”将优先级放到最大。
.ant-popover-message {
position: relative;
padding: 4px 0 12px;
color: rgb(255 255 255) !important;
font-size: 14px;
}
特别注意的是修改后需要重新生成项目才能让样式生效，并且需要清理浏览器记录才可看见效果文章来源：https://www.toymoban.com/news/detail-630557.html
总结
以上就是今天要讲的内容，本文仅仅简单介绍了组件库样式的修改。文章来源地址https://www.toymoban.com/news/detail-630557.html
到了这里，关于【Blazor之关于组件库Ant Design of Blazor组件样式的修改】的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
