Angular 角度材质如何使用css覆盖.mat表单字段隐藏占位符行为

对于Angular Material，我很难用css覆盖.mat表单字段隐藏占位符类，当输入失去焦点时，该类会自动添加到父mat表单字段标记中。目标是始终显示占位符

代码如下所示：

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

字段标签

您可以使用/deep/selector正确重写该类。这是角材料中的一个已知问题

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

---

重要的是要知道/deep/selector目前正被弃用，但据我所知，目前还没有任何其他解决方案来解决这个问题。因此，请注意未来的变化。

最后，我通过以下方式实现了这一目标：

使用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;
}