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

我正在我的项目中使用基本的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>

{{food.viewValue}

如何删除下划线，我也尝试过，但仍然没有结果。

您可以这样做：

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

---

您还可以使用

上的

外观

属性。设置

appearance=“none”

将删除下划线而不进行任何css攻击。您还可以删除不推荐使用的

：：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>

{{food.viewValue}

---

有关外观的更多信息，请查看此处

：ng deep

将被取消分级

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

比如说,

…所有的html代码都在这里

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

   <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表单字段中直接设置
appearance=“none”
例如

您可以使用css隐藏
例如：：ng deep.mat表单字段下划线{display:none；}

---

我可以只为一个

mat select

应用它吗？我在表单中有许多

mat select

。它影响到所有mat表单字段。这也适用于我的表单，我有

，在表单中有一个输入div

（未标记为正确答案），我认为这是更好的方法。“…使用一个ID，它允许您具有更高的特异性…并将样式放在全局样式文件中”。您可以参考的。由于某种原因，物料单据中没有“无”的外观。我确认它确实有效。

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