angular-material输入框没有下划线

Question

在我使用的输入表单上 @angular/material 13.2.5

这是代码

<mat-dialog-content>
  <p mat-dialog-title>{{dialogTitle}}</p>
  <mat-form-field appearance="standard">
    <mat-label>Name</mat-label>
    <input
      #inputTitle
      matInput maxlength="100"
      [(ngModel)]="quizDto.name"
      (keydown.enter)="confirm()"
    />
    <button
      *ngIf="quizDto.name.trim().length > 0"
      class="clear-icon"
      mat-button matSuffix mat-icon-button aria-label="Clear"
      (click)="quizDto.name= ''"
    >
      <mat-icon>clear</mat-icon>
    </button>
  </mat-form-field>
</mat-dialog-content>

但是当我启动应用程序时，输入字段如下所示：

图片显示输入框没有下划线。但是如果你打开网站上的使用示例 https://material.angulal 然后完全相同的代码显示带有下划线的输入元素

<mat-form-field appearance="standard">
    <mat-label>Standard form field</mat-label>
    <input matInput placeholder="Placeholder">
    <mat-icon matSuffix>sentiment_very_satisfied</mat-icon>
    <mat-hint>Hint</mat-hint>
</mat-form-field>

Answer 1

首先确保您在 style.scss.

中添加了 Material CSS

@import '~@angular/material/prebuilt-themes/deeppurple-amber.css';

还要确保您已在 NgModule 中导入 Material 表单字段模块。

import {MatInputModule,MatFormFieldModule} from '@angular/material';

// ....
imports: [
    MatFormFieldModule,
    MatInputModule,
    ...
],

angular-material输入框没有下划线

There is no underscore in the angular-material input field

angular

angular-material