【问题标题】：Adjusting height of mat-form-field Angular Material调整mat-form-field Angular Material的高度
【发布时间】：2021-12-30 22:01:15
【问题描述】：

我遇到了一个问题，即对包含我的自动完成输入的 mat-form-field 进行简单调整。从图像中您可以看到它是否在 mat-toolbar 高度之外，但我还没有找到一种简单的方法来调整整个输入的高度，以便它可以留在工具栏区域内。宽度工作正常。身高没有。

input outside toolbar

我的html代码如下：

 <mat-toolbar  >
      <span style="width:200px">Test</span>
         <label>{{prodPointId}}</label>
        <form class="example-form"  >
            <mat-form-field  appearance="outline"  margin=" 10px" class="example-full-width searchField" >
                <mat-label>Search...</mat-label>

              <input type="text"   matInput [formControl]="myControl" [matAutocomplete]="auto" [(ngModel)]="value" >
              <button mat-button *ngIf="value" matSuffix mat-icon-button aria-label="Clear" (click)="value=''">
                  <mat-icon>close</mat-icon>
                </button>
              <mat-autocomplete #auto="matAutocomplete" [displayWith]="displayFn">
                <mat-option  
                    *ngFor="let option of filteredOptions | async" 
                    [value]="option.prodPointName" 
                    (click)="pointSelected(option.prodPointId)" 
                    [routerLink]="['/coredata', option.prodPointId]" >
                    <mat-icon>home</mat-icon>
                    {{option.prodPointCode}} : {{option.prodPointName}} 
                </mat-option>
              </mat-autocomplete>              
            </mat-form-field>
          </form>                  
  </mat-toolbar>

当我启动 chrome 开发工具时，我尝试使用 div.mat-form-field 和其他几个选项调整组件的 CSS 高度，但似乎没有任何效果。查看 Angular Material 上的文档，我没有找到任何东西可以告诉我如何控制这个简单的样式调整。我错过了什么。这么简单，我只是想多了？谢谢！

【问题讨论】：

stackblitz 演示可能会有所帮助。
您可以调整 .mat-form-field-flex 的高度来控制“框”的大小，但是您会注意到该字段的内部部分没有对齐因为字体太大。您也可以更改它，但对齐方式并不理想，而且字体可能比您想要的要小。它的设计不是为了改变 Material Design 标准（IMO 他们在这方面做得很差——他们试图让它“灵活”，但实际上让它难以控制），所以最终它需要一个极端的破解（可能容易发生不一致）尽可能地完成这项工作。

标签： angular angular-material

【解决方案1】：

需要覆盖css

   <div class="mat-form-field-infix">
    <input class="mat-input-element mat-form-field-autofill-control cdk-text-field-autofill-monitored" ma

tinput="" placeholder="Enter First name" 
ng-reflect-placeholder="Enter First name" id="mat-input-0" aria-describedby="mat-hint-0" aria-invalid="false" aria-required="false">
<span class="mat-form-field-label-wrapper">
<label class="mat-form-field-label id="mat-form-field-label-1" for="mat-input-0" aria-owns="mat-input-0">
<mat-label _ngcontent-nbv-c4="" class="ng-star-inserted">First Name</mat-label>
</label>
</span>
</div>

样式覆盖

.mat-form-field-appearance-outline .mat-form-field-infix {
   padding: 10px;
}
.mat-form-field-infix {
     padding:0;
     border-top: 0;
}

//change top and padding-top as per required

.mat-form-field-label-wrapper {
    top: -0.84375em;
    padding-top: 0.84375em;
}

【讨论】：