如何設計 Angular Material 墊選擇面板的樣式？

在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中文網其他相關文章！