如何设置mat-select文本颜色？Angular Material样式问题

问题场景 #

在mat-toolbar（color="primary"，蓝色背景）中嵌入mat-select时，工具栏内的标题文本默认显示为白色粗体，但mat-select的占位文本"Select Year"和右侧箭头始终为黑色，尝试多种常规样式修改方法均无效。

原始代码：

<mat-card>  
    <mat-toolbar color="primary">Title

       <div style="text-align: right; width: 100%;">
            <mat-select formControlName="year" placeholder="Select Year">
                <mat-option [value]="2023">2023</mat-option>
                <mat-option [value]="2024">2024</mat-option>
            </mat-select>
       </div>
    </mat-toolbar> 
</mat-card>

已尝试的无效操作：

• 给mat-select添加color="primary"属性
• 为mat-select设置内联样式style="color: white"
• 使用panelClass修改下拉面板样式（仅作用于面板内容，不影响触发区）

核心原因 #

Angular Material的MDC版本组件（如mat-select）的触发区文本和箭头样式被组件内部的高优先级CSS类覆盖，常规样式无法穿透组件封装。

解决方案 #

方法1：组件内深度选择器（推荐用于单个组件） #

在当前组件的.scss文件中添加以下代码：

:host ::ng-deep .mat-mdc-select-trigger .mat-mdc-select-placeholder,
:host ::ng-deep .mat-mdc-select-trigger .mat-mdc-select-arrow {
  color: white !important;
  font-weight: bold;
}

• :host 确保样式仅作用于当前组件的mat-select
• ::ng-deep 穿透Angular的组件封装机制，访问组件内部DOM元素
• !important 强制覆盖组件默认的高优先级样式规则

方法2：全局样式（适用于多个组件统一修改） #

在项目根目录的styles.scss中添加：

.mat-toolbar.mat-primary .mat-mdc-select-trigger .mat-mdc-select-placeholder,
.mat-toolbar.mat-primary .mat-mdc-select-trigger .mat-mdc-select-arrow {
  color: white;
  font-weight: bold;
}

通过父元素.mat-toolbar.mat-primary提升选择器优先级，无需!important，仅作用于primary主题工具栏内的mat-select。

方法3：自定义主题（符合Material设计规范的全局方案） #

通过Angular Material的主题系统统一配置，在styles.scss中扩展主题：

@use '@angular/material' as mat;

// 定义自定义主题调色板
$custom-primary: mat.define-palette(mat.$blue-palette);
$custom-accent: mat.define-palette(mat.$pink-palette);
$custom-warn: mat.define-palette(mat.$red-palette);

$custom-theme: mat.define-light-theme((
  color: (
    primary: $custom-primary,
    accent: $custom-accent,
    warn: $custom-warn,
  )
));

// 自定义select触发区的文本和箭头颜色
@include mat.select-theme($custom-theme);
@include mat.select-color($custom-theme, (
  trigger-text-color: mat.get-color-from-palette($custom-primary, contrast),
  trigger-icon-color: mat.get-color-from-palette($custom-primary, contrast),
));

// 应用所有组件主题
@include mat.all-component-themes($custom-theme);

这种方式从主题层面控制颜色，避免硬编码颜色值，完全符合Angular Material的设计规范。

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