Angular Material как переопределить поведение .mat-form-field-hide-placeholder с помощью css

Question

С Angular Material у меня возникли проблемы с переопределением css класса .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

Вы можете использовать / deep / selector для правильного переопределения класса.Это известная проблема в угловом материале.

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

Важно знать, что / deep / selector в настоящее время считается устаревшим, но, насколько я знаю, в настоящее время нет альтернативного решения этой проблемы.Так что обратите внимание на будущие изменения.

Answer 2

Наконец-то я заработал:

Используя 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;
}