时间戳

首页 > 解决方案 > Angular 8：将 Mat-form-field 中的高度更改为特定像素数

css - Angular 8：将 Mat-form-field 中的高度更改为特定像素数

问题描述

如何将高度更改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%;
}

标签： cssangulartypescriptangular-materialangular8

解决方案

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

从顶部和底部删除边距

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

注意：如果您选择做最后一个，您还必须更改topor margin-topof .mat-form-field-labellike this

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

推荐阅读