css - Angular 8 : Change Height in Mat-form-field to Specific pixel number

Question

如何在 mat-form-field 中更改高度与 appearance="outline"到特定的高度像素数，40px(或将来 UX 团队所需的任何数字)。我需要减少 mat-form-field。

如何才能做到这一点？公式是什么，或者哪个零件号可以修改为 40px？
-1.1？ .75 , 133%, 使用下面的答案或任何其他可行的选项寻找某种函数或数学方程。

https://stackoverflow.com/a/54762506/12425844

::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%;
}

Answer 1

不确定你想从哪里剪裁，所以我会给你一些选择，你可以决定你想剪什么和剪多少以获得合适的尺寸

去除顶部和底部的边距

::ng-deep mat-form-field.mat-form-field-appearance-outline .mat-form-field-wrapper {
    margin: 0;
}

更改字体大小

mat-form-field {
    font-size: 10px;
}

删除提示和错误(底部的空格)

::ng-deep .mat-form-field-wrapper {
    padding-bottom: 0;
}
::ng-deep .mat-form-field-subscript-wrapper {
    display: none;
}

更改填充(顶部和底部默认为 1em)

::ng-deep .mat-form-field-appearance-outline .mat-form-field-infix {
    padding: .5em;
}

注意:如果您选择做最后一个，您还必须更改 top或 margin-top的 .mat-form-field-label像这样

::ng-deep .mat-form-field-appearance-outline .mat-form-field-label {
    top: ...;
    margin-top: ...;
}