角材料表单字段外观填充大小

Question

打开

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

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

在开发人员工具中，我可以找到该类并能够减小大小。

将此类放在我的CSS中不会更改大小。

不确定如何在CSS中添加类名来更改填充。

Answer 1

尝试从styles.css添加此类。

div.mat-form-field-infix {   填充：0em 0！重要 }

Answer 2

尝试ng-deep进入组件的scss

::ng-deep  .mat-form-field-infix {
  padding: 0em 0;
}

https://angular.io/guide/component-styles#deprecated-deep--and-ng-deep

Answer 3

您可以尝试1234

Answer 4

要减少字段填充，我必须重写外观轮廓和这样的infix类：

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

Answer 5

当它不存在时，通过将它添加到您的 root.css 来摆脱 mat-label 本身的占位符

.mat-form-field.mat-form-field-appearance-outline:not(.mat-form-field-has-label){
  .mat-form-field-infix {
    border-top: 0 !important;
  }
}