在Angular Material 中設定mat-select 的樣式

自訂mat-select 的外觀時，您可能會在設定其面板元件的樣式時遇到挑戰。儘管遵循使用 panelClass 屬性指定自訂樣式的建議方法，但樣式無法套用，讓您感到困惑。

為什麼樣式不起作用

Angular Material 使用 mat-select -content 作為選擇清單內容的類別名稱。要設定此元件的樣式，可以使用多種方法：

1。使用 ::ng-deep

使用 ::ng-deep 陰影穿透後代組合器強制樣式通過子組件。

::ng-deep .mat-select-content {
  width: 2000px;
  background-color: red;
  font-size: 10px;
}

2.使用 ViewEncapsulation

將元件的視圖封裝配置為 None，讓樣式逃脫元件的隔離。

@Component({
  ...
  encapsulation: ViewEncapsulation.None
})

3.在 style.css 中設定類別樣式

使用 style.css 檔案定義自訂樣式，並使用 !important 強制執行它們以覆蓋任何現有樣式。

.mat-select-content {
  width: 2000px !important;
  background-color: red !important;
  font-size: 10px !important;
}

4.使用內聯樣式

將內聯樣式直接套用於 mat-option 元素，覆寫任何繼承的樣式。