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


Angular Material how to override .mat-form-field-hide-placeholder behavior with css

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

代码看起来像这样：

1
2
3
4
5
6
<mat-form-field>
  <mat-label>
      Field label
  </mat-label>
  <input type="text" placeholder="placeholder text">
</mat-form-field>

最终，我做到了：

使用SASS：

1
2
3
4
5
6
7
8
.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：

1
2
3
4
.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;
}

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

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

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