html - Angular Material 表单字段外观填充大小

Question

开启

<mat-form-field appearance="outline">

是否可以减小边框的默认填充大小？

在开发者工具中我可以找到类并且能够减小大小。

将这个类放在我的 css 中不会改变大小。

不确定如何将类名放入我的 css 中以更改填充。

Answer 1

为了减少字段填充，我不得不像这样覆盖外观轮廓和中缀类:

::ng-deep .mat-form-field-appearance-outline .mat-form-field-infix {
  padding: 0.7em 0 0.7em 0 !important;
  top: -0.25em;
}