如何设置mat-select选中后保持聚焦时的颜色？

Angular Material默认没有提供直接配置项实现该需求，需通过自定义CSS覆盖默认样式，具体步骤如下：

1. 修改模板代码，添加自定义类 #

给mat-select添加自定义类，用于精准定位样式：

<mat-form-field>
  <mat-label>Choose an option</mat-label>
  <mat-select class="custom-selected-color">
    <mat-option value="option1">Option 1</mat-option>
  </mat-select>
</mat-form-field>

2. 添加全局样式规则 #

在全局样式文件（如styles.scss）中写入以下CSS，覆盖默认的聚焦/失焦状态样式：

/* 聚焦状态下，已选中项的文本颜色 */
.custom-selected-color.mat-select-focused .mat-select-value-text {
  color: #1976d2; /* 替换为你需要的颜色值 */
}

/* 失焦状态下，已选中项的文本颜色 */
.custom-selected-color.mat-select:not(.mat-select-focused) .mat-select-value-text {
  color: #1976d2; /* 与聚焦状态保持一致的颜色 */
}

/* 可选：同步修改下拉箭头的颜色 */
.custom-selected-color.mat-select-focused .mat-select-arrow,
.custom-selected-color.mat-select:not(.mat-select-focused) .mat-select-arrow {
  color: #1976d2;
}

注意事项 #

若在组件内的样式文件中编写，需添加::ng-deep穿透Angular的视图封装（Angular 15+建议结合:host使用）：

:host ::ng-deep .custom-selected-color.mat-select-focused .mat-select-value-text {
  color: #1976d2;
}

内容的提问来源于stack exchange，提问作者Berkay Yıldız