在Angular Material 中設定墊子選擇面板的樣式
使用panelClass 自訂墊子選擇組件的面板時，儘管HTML 模板中進行了正確的類別分配，CSS 樣式仍無法套用。
對於Angular 9 及更高版本：
<code class="css">.mat-select-panel {
background: red;
....
}</code>對於Angular 2.0.0- beta.12 及更早版本中，有幾個選項可以設定面板樣式：
選項1：使用::ng-deep
此方法利用::ng -deep組合器來穿透組件的視圖封裝：
<code class="css">::ng-deep .mat-select-content{
width:2000px;
background-color: red;
font-size: 10px;
}</code>方案2：使用ViewEncapsulation
透過在元件元資料中將封裝模式設定為None，CSS樣式不再封裝在元件檢視中：
<code class="typescript">import {ViewEncapsulation } from '@angular/core';
@Component({
....
encapsulation: ViewEncapsulation.None
}) </code>選項3：在style.css 中設定類別樣式
將樣式直接套用於.mat-select-外部style.css 檔案中的內容類，使用!important 強制應用：
<code class="css"> .mat-select-content{
width:2000px !important;
background-color: red !important;
font-size: 10px !important;
} </code>選項4：使用內聯樣式
直接在HTML 模板：
<code class="html"><mat-option style="width:2000px; background-color: red; font-size: 10px;" ...></code>
以上是如何設計 Angular Material 墊選擇面板的樣式？的詳細內容。更多資訊請關注PHP中文網其他相關文章！
