Angular 8中mat-select占位符自定义类样式失效的解决办法

问题原因 #

你把自定义类customclass添加到了<mat-select>标签上，但.mat-form-field-label是<mat-form-field>的直接子元素，原选择器::ng-deep .customclass .mat-form-field-label无法匹配到目标元素，因为层级关系不对应。

解决方案 #

方案1：将自定义类移到<mat-form-field>标签上 #

这是最简单直接的方式，调整HTML结构，把customclass加到<mat-form-field>上：

<mat-form-field class="customclass">
  <mat-select matNativeControl placeholder="Student">
    <mat-option value="101" selected>Krishna</mat-option>
    <mat-option value="102">Mahesh</mat-option>
    <mat-option value="103">Shiva</mat-option>
  </mat-select>
</mat-form-field>

样式保持你原来的写法即可生效：

::ng-deep .customclass .mat-form-field-label {
  color: green !important;
  font-size: 20px;
}

方案2：调整CSS选择器（不修改HTML结构） #

如果必须保留customclass在<mat-select>上，需要修改选择器，通过<mat-form-field>的子元素关系定位：

::ng-deep .mat-form-field .customclass ~ .mat-form-field-label-wrapper .mat-form-field-label {
  color: green !important;
  font-size: 20px;
}

或者使用更精准的层级匹配（需浏览器支持:has()选择器）：

::ng-deep mat-form-field:has(.customclass) .mat-form-field-label {
  color: green !important;
  font-size: 20px;
}

额外提示 #

• 尽量避免滥用!important，如果通过提升选择器优先级能生效，可移除!important，比如增加选择器层级：::ng-deep .customclass .mat-form-field.mat-form-field .mat-form-field-label
• Angular 8中::ng-deep仍可正常使用，若后续升级版本，可考虑使用ViewEncapsulation.None或组件级样式隔离方案替代。

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