Как изменить высоту в mat-form-field

Question

Как я могу изменить высоту в mat-form-field с помощью appearance="outline"?

Мне нужно уменьшить поле формы мат.

Мой пример ввода

Answer 1

Использование решения @ AkberIqbal испортило мой стиль для полей mat-form-field, где не outline.Также этому решению не нужно никаких !important;.С !important; вы уже потерялись: D.

Так что вот вам способ сохранить ваши глобальные стили: (кажется излишним, но я скорее буду экономить, чем сожалею)

mat-form-field.mat-form-field.mat-form-field-appearance-outline > div.mat-form-field-wrapper > div.mat-form-field-flex > div.mat-form-field-infix  { padding: 0.4em 0px }
mat-form-field.mat-form-field.mat-form-field-appearance-outline > div.mat-form-field-wrapper > div.mat-form-field-flex > div.mat-form-field-infix > span.mat-form-field-label-wrapper { top: -1.5em; }

.mat-form-field-appearance-outline.mat-form-field-can-float.mat-form-field-should-float .mat-form-field-label {
    transform: translateY(-1.1em) scale(.75);
    width: 133.33333%;
}

Итак, как вы можете видеть.Я «выслеживаю» каждый класс, пока не найду набросок! Мне нравится, когда стили контуров применяются только к полям контуров .

Answer 2

Добавьте их в свой CSS в вашем оригинальном стеке

::ng-deep .mat-form-field-flex > .mat-form-field-infix { padding: 0.4em 0px !important;}
::ng-deep .mat-form-field-appearance-outline .mat-form-field-label { margin-top:-15px; }
::ng-deep label.ng-star-inserted { transform: translateY(-0.59375em) scale(.75) !important; }

ОБНОВЛЕНО : с переходом для метки ...

::ng-deep .mat-form-field-flex > .mat-form-field-infix { padding: 0.4em 0px !important;}
::ng-deep .mat-form-field-label-wrapper { top: -1.5em; }

::ng-deep .mat-form-field-appearance-outline.mat-form-field-can-float.mat-form-field-should-float .mat-form-field-label {
    transform: translateY(-1.1em) scale(.75);
    width: 133.33333%;
}