如何删除mat-select组件的下划线

Question

我在我的项目中使用基本的mat-select组件.

 <mat-form-field>
     <mat-select placeholder="Favorite food">
       <mat-option *ngFor="let food of foods" [value]="food.value">
          {{food.viewValue}}
        </mat-option>
    </mat-select>
 </mat-form-field>

我怎么能删除下划线,我已经尝试过这个答案仍然没有结果.

Answer 1

您还可以appearance在<form-field>. 设置appearance="none"将在没有任何 css hack 的情况下删除下划线。你也可以摆脱::ng-deep不推荐的。

所以你的代码会是这样的。

<mat-form-field appearance="none">
 <mat-select placeholder="Favorite food">
   <mat-option *ngFor="let food of foods" [value]="food.value">
      {{food.viewValue}}
    </mat-option>
  </mat-select>
</mat-form-field>

有关外观的更多信息，您可以在这里查看。https://material.angular.io/components/form-field/overview#form-field-appearance-variants

Answer 2

你可以这样做:

::ng-deep .mat-form-field-underline {
  display: none;
}

StackBlitz