Angular Material如何用css覆盖.mat-form-field-hide-placeholder行为

Question

使用 Angular Material，当输入失焦时，我无法覆盖 .mat-form-field-hide-placeholder 类，该类会自动添加到父 mat-form-field 标记中。目标是始终显示占位符。

代码如下所示：

<mat-form-field>
  <mat-label>
      Field label
  </mat-label>
  <input type="text" placeholder="placeholder text">
</mat-form-field>

Answer 1

最后，我做到了：

使用 SASS：

.mat-form-field.mat-form-field-hide-placeholder {
  .mat-form-field-infix {
    .mat-input-element::placeholder {
      color: $gray-350 !important;
      -webkit-text-fill-color: $gray-350 !important;
    }
  }
}

或纯 CSS：

.mat-form-field.mat-form-field-hide-placeholder .mat-form-field-infix  .mat-input-element::placeholder {
      color: $gray-350 !important;
      -webkit-text-fill-color: $gray-350 !important;
}

Answer 2

您可以使用 /deep/ 选择器正确覆盖该类。这是角材料中的一个已知问题。

/deep/ .mat-form-field-hide-placeholder {
    // your code here
}

了解 /deep/ 选择器目前已被弃用很重要，但据我所知，目前没有任何替代解决方案可以解决此问题。所以要注意未来的变化。