angular - 调整 mat-form-field Angular Material 的高度

Question

我遇到了一个问题，即对包含我的自动完成输入的 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 的文档，我没有找到任何可以告诉我如何控制这种简单样式调整的内容。我错过了什么。是不是这么简单，我只是想多了？谢谢!

Answer 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;
}