Angular 15中如何修改mat-select选中选项的文本颜色？

在Angular 15中，我需要修改mat-select组件选中选项的文本颜色，尝试了多种样式均未生效，仅修改下拉面板背景色的样式正常工作。以下是相关代码及尝试情况：

HTML代码 #

<mat-form-field>
     <mat-label>From</mat-label>
     <mat-select panelClass="mat-select-red">
         <mat-option>January</mat-option>
         <mat-option>February</mat-option>
         <mat-option>March</mat-option>
     </mat-select>
</mat-form-field>

TS代码（已关闭视图封装） #

@Component({
  selector: 'app-myapp',
  templateUrl: './myapp.component.html',
  styleUrls: ['./myapp.component.scss'],
  encapsulation: ViewEncapsulation.None
})

尝试过的无效SCSS样式 #

.mat-select-red.mat-mdc-select-value-text{
  color: red !important;
}

.mat-select-red.mat-select-value-text{
  color: red !important;
}

.mat-select-red.mat-mdc-select-value{
  color: red !important;
}

.mat-select-red.mat-select-value{
  color: red !important;
}

.mat-select-red.mat-mdc-select{
  color: red !important;
}

.mat-select-red.mat-select{
  color: red !important;
}

.mat-select-red.mat-mdc-select-min-line{
  color: red !important;
}

mat-mdc-form-field{
  color: red;
}

唯一生效的SCSS样式（仅修改背景色） #

.mat-select-red.mat-mdc-select-panel {
  background: rgba(255, 0, 0, 0.5);
}

渲染后的HTML #

<mat-select role="combobox" aria-autocomplete="none" aria-haspopup="listbox" formcontrolname="startMonth" panelclass="mat-select-red" class="mat-mdc-select ng-tns-c33-1 ng-tns-c20-0 ng-valid ng-star-inserted ng-touched ng-dirty" ng-reflect-panel-class="mat-select-red" ng-reflect-name="startMonth" aria-labelledby="mat-mdc-form-field-label-0 mat-select-value-1" id="mat-select-0" tabindex="0" aria-expanded="false" aria-required="false" aria-disabled="false" aria-invalid="false"><div cdk-overlay-origin="" class="mat-mdc-select-trigger ng-tns-c33-1"><div class="mat-mdc-select-value ng-tns-c33-1" ng-reflect-ng-switch="false" id="mat-select-value-1"><!--bindings={
  "ng-reflect-ng-switch-case": "true"
}--><span class="mat-mdc-select-value-text ng-tns-c33-1 ng-star-inserted" ng-reflect-ng-switch="false"><span class="mat-mdc-select-min-line ng-tns-c33-1 ng-star-inserted">February</span><!--container--><!--bindings={
  "ng-reflect-ng-switch-case": "true"
}--></span><!--bindings={
  "ng-reflect-ng-switch-case": "false"
}--></div><div class="mat-mdc-select-arrow-wrapper ng-tns-c33-1"><div class="mat-mdc-select-arrow ng-tns-c33-1"><svg viewBox="0 0 24 24" width="24px" height="24px" focusable="false" class="ng-tns-c33-1"><path d="M7 10l5 5 5-5z" class="ng-tns-c33-1"></path></svg></div></div></div><!--bindings={
  "ng-reflect-open": "false"
}--></mat-select>

解决方案 #

从渲染后的HTML可以看到，panelClass="mat-select-red" 直接添加在 <mat-select> 元素上，而选中文本的容器是它的后代元素 .mat-mdc-select-value-text（或 .mat-mdc-select-min-line）。之前的样式写法错误地将两个类绑定在同一个元素上（使用 .a.b 选择器），实际需要用后代选择器（.a .b）匹配子元素。

使用以下SCSS样式即可修改选中选项的文本颜色：

.mat-select-red .mat-mdc-select-value-text {
  color: red !important;
}
// 或者直接选中最小行元素
.mat-select-red .mat-mdc-select-min-line {
  color: red !important;
}

内容的提问来源于stack exchange，提问作者jkfe