CSS 如何更改 mat-form-field 中的高度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/54760371/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to change height in mat-form-field
提问by Stack Overflow
How can I change height in mat-form-fieldwith appearance="outline"?
我怎样才能改变高度mat-form-field与appearance="outline"？
I need to reduce the mat-form-field.
我需要减少 mat-form-field。
回答by Akber Iqbal
Add these to your CSS in the your original stackblitz
将这些添加到原始堆栈闪电战中的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; }
UPDATED: with transition for the label...
更新：标签的过渡......
::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%;
}
回答by Andre Elrico
Using @AkberIqbal's solution messed up my styling for mat-form-fields that where not outline. Also this solution does not need any !important;. With !important;you're already lost :D.
使用@AkberIqbal 的解决方案弄乱了我的 mat-form-fields 样式，而不是outline. 此外，此解决方案不需要任何!important;. 有了!important;你已经失去了：d。
So here is a safe way to add to your global styles: (seems overkill, but I rather be save than sorry)
所以这里有一种安全的方法来添加到您的全局样式中：（似乎有点矫枉过正，但我宁愿省心也不愿后悔）
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%;
}
So as you can see. I "hunt" down every class until I have found a outline! I like outline styling to only be applied to outline-fields.
正如你所看到的。我“搜索”每节课，直到找到大纲！我喜欢大纲样式只应用于大纲字段。
回答by Peter Nixey
TLDR:adjust the font-size of the surrounding container.
TLDR：调整周围容器的字体大小。
Longer:The functionality for resizing the form-fields is built into Angular Material so unless you want to change relative proportions in the field, you don't need to get muddy with resizing individual components (see documentation).
更长：调整表单字段大小的功能内置于 Angular Material 中，因此除非您想更改字段中的相对比例，否则您无需为调整单个组件的大小而感到困惑（请参阅文档）。
The key to adjusting the field size is actually just adjusting the font-size in the surrounding container. Once you do that, everything else will scale with it. e.g.
调整字段大小的关键实际上只是调整周围容器中的字体大小。一旦你这样做了，其他一切都将随之扩展。例如
With container font-size: 12px;
使用容器字体大小：12px；
<div style="font-size: 12px">
<mat-form-field appearance="outline">
<mat-label>Your name</mat-label>
<input matInput placeholder="Jane Doe">
</mat-form-field>
<mat-form-field appearance="outline">
<mat-label>Your email</mat-label>
<input matInput placeholder="[email protected]">
</mat-form-field>
</div>
Resultant form:
结果形式：
With container font-size: 18px;
使用容器字体大小：18px；
<div style="font-size: 18px">
<mat-form-field...
</div>
Resultant form:
结果形式：
NB
NB
This isn't a solution for you if you're not happy with the default padding of the material forms. However that's a different question to how you simply resize the forms. Resizing is simple, altering padding etc. is more hairy!
如果您对材料表单的默认填充不满意，这不是适合您的解决方案。然而，这与您如何简单地调整表单大小是一个不同的问题。调整大小很简单，改变填充等更麻烦！
回答by Wildhammer
In case someone wants to make Akber Iqbal's answer class-based(to have both sizes available):
如果有人想让 Akber Iqbal 的回答基于类（同时提供两种尺寸）：
:host ::ng-deep {
.my-custom-component-small { // add my-custom-component-small class to your mat-form-field element
.mat-form-field-flex > .mat-form-field-infix { padding: 0.4em 0 !important;}
.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%;
}
}
}
Hopefully, the Angular team adds support for high-density UI in future releases(high-density is part of material design specifications).
希望 Angular 团队在未来版本中增加对高密度 UI 的支持（高密度是材料设计规范的一部分）。
回答by Russ
Here is a recent solution of mine for a field that is 32px tall and allows for rounded corners.
这是我最近针对 32px 高并允许圆角的字段的解决方案。
& .mat-form-field-wrapper {
height: 44.85px;
& .mat-form-field-flex {
height: 32px;
& .mat-form-field-outline {
$borderRadius: 25px;
height: 28px;
& .mat-form-field-outline-start {
border-radius: $borderRadius 0 0 $borderRadius;
width: 13px !important; // Override Material in-line style
}
& .mat-form-field-outline-end {
border-radius: 0 $borderRadius $borderRadius 0;
}
}
& .mat-form-field-infix {
left: 4px;
padding: 0;
top: -7px;
& .mat-form-field-label,
& .mat-input-element {
font-size: 12px;
}
& .mat-form-field-label-wrapper {
top: -1.04375em;
& .mat-form-field-label {
height: 16px;
}
}
}
}
}
