如何删除 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 还是没有结果。

Answer 1

我在 mat-form-field 上有外观 =“填充”。这些设置为我删除了下划线：

scss:

.mat-form-field-appearance-fill {
  .mat-form-field-underline {
    display: none;
  }
}

给组件中的ViewEncapsulation.None添加set封装：

encapsulation: ViewEncapsulation.None

Answer 2

解决问题的两种选择：

1. 您可以直接在mat-form-field标签中设置appearance="none"
   前任。 <mat-form-field appearance="none">。
2. 您可以使用 css 隐藏
   前任。 ::ng-deep .mat-form-field-underline { display: none; }

Answer 3

如果您只想在特定输入中隐藏下划线，则可以执行以下操作。

   <div class="select-block">
        <mat-form-field>
           <mat-select placeholder="Select Option">
             <mat-option>One</mat-option>
             <mat-option>Two</mat-option>
             <mat-option>Three</mat-option>
          </mat-select>
       </mat-form-field>
    </div>

• 在 mat-form-field 的父类中添加如下代码行。

.select-block{
    /deep/ mat-form-field {
      &.mat-form-field-appearance-legacy {
        .mat-form-field-underline {
          display: none;
        }
      }
    }
 }

试试这个方法来隐藏下划线。 谢谢。

Answer 4

::ng-deep 将被弃用。

使用 css 层次结构。如果您有一个全局 css 或 scss 文件......然后在组件中，将其包装在一个 div 中并给它一个类。

例如，

<div class="content-wrapper">

...all your html code here

</div>

然后，在您的全局 css/scss 文件中，您可以像这样定位 .mat-form-field-underline 类：

.content-wrapper .mat-form-field-underline {
  display: none;
}

在这里，请注意我们在类名之后不使用逗号。这是使用层次结构。它表示我们只想定位封装在 .content-wrapper 内的原生 .mat-form-field-underline 类

希望这会有所帮助。很高兴我的高级开发人员在我们使用 ViewEncapsualtion 时与我分享了这一点，它使 css 到处流血。这是我们用例的正确解决方案，希望对您有所帮助。

这也适用于其他用于自定义代码/html 的原生 mat 类。

Answer 5

您还可以在 <form-field> 上使用 appearance 属性。设置 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 6

你可以这样做：

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

StackBlitz