如何更改 mat-form-field 中的高度

Question

如何使用 appearance="outline" 更改 mat-form-field 的高度？

我需要减少 mat-form-field。

我的输入示例

原文由 Stack Overflow 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

在你 原来的 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; }

更新：标签的过渡…

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

原文由 Akber Iqbal 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

如果其他人面临同样的问题，可以按照这个简单的方法设置 mat-input 的高度给你的输入一个类，比如

    <mat-form-field appearance="outline"  class="small-height-input">
       <input matInput placeholder="Email">
    </mat-form-field>

进入您的 style.scss 添加此代码

.small-height-input{
  max-height: 46px;
  width: 300px;
  border-radius: 4px;
  font-size: 12px !important;// decrease the font size  to set height
  .mat-input-element{
    font-size: 16px !important;  //increase the size of input font
  }
}

原文由 Saad Abbasi 发布，翻译遵循 CC BY-SA 4.0 许可协议