Angular 15 Material 对齐输入字段中的文本以匹配选择字段

Question

在搜索组件中，我有两个 mat-form-fields，一个是选择字段，另一个是文本输入字段。

在两个字段中输入文本时，输入文本字段的文本不会与选择字段的文本水平对齐。在我们迁移到 Angular 15 时更改为 MDC 组件之前，这曾经是对齐的。 我怎样才能使两个字段的文本具有相同的水平对齐方式，或者至少降低常规输入字段中的文本，以便它离选择框文字位置更近吗？

<form novalidate [formGroup]="this.areaForm" class="eris-d-flex search-form" autocomplete="off" spellcheck="false">
<mat-form-field appearance="outline">
  <mat-label>Area</mat-label>
  <mat-select formControlName="area" id="areaInput">
      <mat-option *ngFor="let area of areas$ | async" [value]="area">
          {{area.Name}}
      </mat-option>
  </mat-select>
</mat-form-field>
<mat-form-field appearance="outline" class="eris-ml-2">
  <mat-label>Search Text</mat-label>
  <input formControlName="searchValue" id="searchValueInput" matInput placeholder="Search">
</mat-form-field>
<button [disabled]="!this.areaForm.valid" mat-raised-button color="primary" class="eris-ml-1 edaps-search-button"   (click)="this.getListData()">
  <mat-icon>search</mat-icon>
</button>
<button [disabled]="this.areaForm.get('searchValue')?.value?.length === 0" mat-raised-button class="eris-ml-1 edaps-search-button" type="reset" color="accent" (click)="clear()">
  <mat-icon>close</mat-icon>
</button>

Answer 1

如果不查看浏览器中应用于页面的样式，就很难找到原因。

一些想法：

1. 您是否有任何应用于 Angular Material 组件的自定义样式？您是否检查过MDC 迁移指南，了解这两个组件中具体发生了什么变化？也许您的某些自定义样式在迁移后不再应用，因为组件的 DOM 结构可能已更改。自动迁移是否在您的 CSS 代码中留下了任何 TODO？

2. 使用浏览器开发者工具找出两个组件的 DOM 结构和应用样式的差异在哪里。这可以引导您找到解决方案。