mat-input 和 mat-form-field 的 CSS 问题

Question

我尝试做一个 stackblitz，但它不接受我的 <mat-form-field> 和 <mat-label> 标签而没有错误，我导入了所需的组件但它不起作用。

但是，如果我在此处发布代码，也许您仍然可以帮助我，我遇到了 CSS 问题，因为当我使用 <mat-form-field> 时，我不知道移动 <mat-label> 标记的目标是什么appearance="outline" 当标签在中心时，在input field 上方，我不能移动它，我希望它居中，但它在mat-form-field 的底部。

如果我调整 position:absolute 值，问题是，当点击发生时标签超出字段上方时，这些规则也会被应用，将浮动标签移动到错误的位置。

代码：

<div 
    id="test" 
    fxLayout="row" 
    fxLayoutGap="12px" 
    fxLayoutAlign="start center" 
    [class.hasFocus]="numberMatInput.value">
    <mat-form-field appearance="outline">
         <mat-label>KM</mat-label>
         <input matInput #numberMatInput [formControl]="numberInput">
    </mat-form-field>
</div>

和 CSS：

#test ::ng-deep .mat-form-field-appearance-outline {
  width: 65px;
  height: 45px;
  line-height: 1.725;
}

#test ::ng-deep .mat-form-field-appearance-outline .mat-form-field-flex {
  padding: 0px 10px 0px 10px;
}

#test ::ng-deep .mat-form-field-infix {
  padding: 3px 0 3px 0;
}

这是想要的结果：

所以基本上我需要在输入字段未被触摸时移动标签，并在它获得焦点时将其留在浮动上方的相同空间中。

对我来说，两者似乎只有一个规则，所以如果我移动未触及的标签，浮动的标签也会移动。

有人可以帮忙吗？谢谢你

Answer 1

尝试使用以下 css：

#test ::ng-deep .mat-form-field-hide-placeholder .mat-form-field-label-wrapper {
   text-align: center;
   top: -25px;
}

#test ::ng-deep .mat-form-field-should-float {
   text-align: center;
}

Demo