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 添加类