Mat-select 使背景與選中的mat-option相同

Question

<mat-form-field>
  <mat-select [formControlName]="name">
    <mat-option
      [value]="option.id"
      [ngStyle]="{backgroundColor: option.color}"
      *ngFor="let option of list; let i = index"
      >
      {{option.title}}
    </mat-option>
  </mat-select>
</mat-form-field>

我需要將 mat-select 的背景顏色設置為與所選選項option.color相同。 我將很快將它移動到它自己的組件中，我可以只跟蹤一些作為所選選項的變量，並以這種方式設置 mat-select 的背景顏色。

我想知道還有哪些其他想法可能更容易

Answer 1

在你的styles.scss文件中

.mat-mdc-option.mat-mdc-option-active{

    background-color:#fff; //The color you want

}

或者在你的_theme-reset.scss

@use "sass:map";
@use "@angular/material" as mat;

@mixin theme-reset($theme) {
    .mat-mdc-option.mat-mdc-option-active{

        background-color:var(--mdc-theme-surface, #fff); // Get the color and set
    }
}

}

它將應用於所有墊選擇。 如果你想應用一個特定的 mat-select，你必須向 mat-select 和 CSS 添加類