前言
例如：我們在使用Blazor框架時為了節(jié)省時間提升效率會使用到Ant Design of Blazor組件庫。在使用過程中我們會根據(jù)需求去修改樣式，但是由于組件庫里面的樣式基本上都是封裝好的，要想達到自己所需的效果，這時候就需要我們?nèi)バ薷臉邮健１疚木徒榻B一下我在使用Ant Design of Blazor組件樣式的修改的方法。
一、Ant Design of Blazor是什么？
是 Ant Design 的 Blazor 實現(xiàn)，開發(fā)和服務(wù)于企業(yè)級后臺產(chǎn)品。
? 特性
- ?? 提煉自企業(yè)級中后臺產(chǎn)品的交互語言和視覺風格。
- ?? 開箱即用的高質(zhì)量 Razor 組件，可在多種托管方式共享。
- ?? 支持基于 WebAssembly 的客戶端和基于 SignalR 的服務(wù)端 UI 事件交互。
- ?? 支持漸進式 Web 應(yīng)用（PWA）
- ?? 使用 C# 構(gòu)建，多范式靜態(tài)語言帶來高效的開發(fā)體驗。
- ?? 基于 .NET Standard 2.1/.NET 5/.NET 6，可直接引用豐富的 .NET 類庫。
- ?? 可與已有的 ASP.NET Core MVC、Razor Pages 項目無縫集成。
- ?? 基于 MIT 開源協(xié)議，.NET 基金會項目，商業(yè)應(yīng)用免費。
?? 官方文檔
官方文檔中已經(jīng)很詳細的講解的了安裝使用，下面附上官方文檔地址：https://antblazor.com/zh-CN/docs/introduce
二、對組件庫樣式修改方法的總結(jié)
1.第一種就是查看所用組件的樣式接口
組件庫中有的組件的樣式是有接口的，可以在接口中修改。其次也可以在組件中通過添加style在其中通過添加屬性完成修改，一般組件都能在style中添加樣式的寬高屬性完成對樣式的修改。若直接修改沒有生效則使用以下第二種第三種方法修改。
2.第二種通過添加樣式隔離完成對組件樣式的修改
首先檢查項目中在index.html中是否引入
<link href="{ASSEMBLY NAME}.styles.css" rel="stylesheet">
在修改樣式時不能通過style中添加屬性直接修改時也沒有效果這時候只能通過樣式隔離完成修改。在相應(yīng)的組件名.razor.css文件中修改樣式。
例如：在我們使用到的Tabs組件我們要是想修改Tabs頁簽的背景顏色大小是沒有辦法通過直接在style中添加屬性修改樣式。
因此我們先運行頁面，在網(wǎng)頁中通過檢查元素，查看到需要修改的部分的css屬性在相應(yīng)的屬性前添加 " ：：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" />
同樣的方法在查看網(wǎng)頁的元素去，通過元素查找到需要修改的屬性，將屬性復(fù)制到全局css中修改。將所需要修改的屬性后面 “!important ”將優(yōu)先級放到最大。
.ant-popover-message {
position: relative;
padding: 4px 0 12px;
color: rgb(255 255 255) !important;
font-size: 14px;
}
特別注意的是修改后需要重新生成項目才能讓樣式生效，并且需要清理瀏覽器記錄才可看見效果文章來源：http://www.zghlxwxcb.cn/news/detail-630557.html
總結(jié)
以上就是今天要講的內(nèi)容，本文僅僅簡單介紹了組件庫樣式的修改。文章來源地址http://www.zghlxwxcb.cn/news/detail-630557.html
到了這里，關(guān)于【Blazor之關(guān)于組件庫Ant Design of Blazor組件樣式的修改】的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
