как установить позицию заполнителя в mat-input

Question

Я меняю некоторые стили в моём вводе матовЯ получил все из них, но положение заполнителя внутри ввода.

<mat-form-field>
   <input matInput type="email" name="email" [required]="true" placeholder="email" class="my-class"/>
</mat-form-field>

.my-class {
  padding: 10px;
  box-sizing: border-box;
}

Это хорошо работает, когда внутри ввода есть электронное письмо, но когда оно пустое, "электронная почта" заполнителя перемещается внутри ввода ион находится в верхнем углу.

Проверяя css, я обнаруживаю, что класс добавляется и удаляется вmat-form-field, это "mat-form-field-sould-float", мой селектор будет выглядеть примерно так:

mat-form-field:not(.mat-form-field-should-float) .mat-input-placeholder

, но я не могу заставить его работать.

Как я могу это изменить?

Answer 1

Из-за инкапсуляции вида вы не сможете изменить CSS своего ввода в таблице стилей вашего компонента.

Вам придется изменить style.scss в корне вашего проекта.Вы можете использовать тот же селектор:

mat-form-field:not(.mat-form-field-should-float) .mat-input-placeholder {
  padding: 10px;
  box-sizing: border-box;
}