我的Angular Material部分组件文本显示为白色不可见是什么原因？

问题原因 #

该问题由自定义粉蓝灰色主题的配色与Angular Material（简称mat）组件默认的主题色继承规则冲突导致：mat-tab-group默认会读取全局主题配置中的前景文本色，你当前使用的主题将内容区域的前景色设置为白色，和mat-tab内容区的浅背景对比度不足，所以文本不可见；选中时能看到是因为选中状态的背景色和白色文本有足够对比度。

解决方法 #

方法1：局部样式覆盖（无需修改全局主题，推荐快速修复）

给mat-tab-group添加自定义类名，单独指定文本颜色即可：

1. 修改组件模板代码：

<mat-tab-group class="custom-tab-group">
    <mat-tab label="First" > Content 1 </mat-tab>
    <mat-tab label="Second"> Content 2 </mat-tab>
    <mat-tab label="Third"> Content 3 </mat-tab>
</mat-tab-group>

2. 添加对应样式：
   如果是写在当前组件对应的样式文件中，需要加::ng-deep穿透Angular的样式隔离：

::ng-deep .custom-tab-group .mat-tab-body-content {
  /* 替换为适配你主题的深色文本色即可 */
  color: #212121;
}

/* 如果标签栏的label文字也显示为白色，补充以下样式 */
::ng-deep .custom-tab-group .mat-tab-label {
  color: #212121;
}

如果是写在项目全局的styles.scss文件中，直接编写上述样式即可，不需要加::ng-deep前缀。

方法2：修改全局主题配置（一劳永逸，适配所有mat组件）

在你定义粉蓝灰主题的SCSS文件中，调整主题的前景色配置，统一指定内容区域的默认文本色为非白色值：

// 合并默认前景色配置，修改文本色值
$custom-foreground: map-merge($mat-light-theme-foreground, (
  text: #212121,
  secondary-text: #757575
));

// 生成自定义主题时传入自定义前景色配置
$custom-theme: mat-light-theme($custom-primary, $custom-accent, $custom-warn, $custom-foreground);

// 应用自定义主题
@include angular-material-theme($custom-theme);

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