Question

我在项目中使用基本的垫选择组件。

 <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

您可以这样做：

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

StackBlitz

Answer 2

您还可以在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 3

::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;
}

在这里，请注意，我们在类名之后不使用逗号。这是使用层次结构。它说我们只想定位包装在.mat-form-field-underline

中的本机.content-wrapper类

希望这会有所帮助。很高兴在我们使用ViewEncapsualtion时，我的高级开发人员与我分享了这一点，它在整个地方都放了CSS。这是我们用例的正确解决方案，希望对您有帮助。

这也适用于其他本地mat类，用于自定义您的代码/ html。

Answer 4

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

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

解决问题的两个选项：

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

Answer 6

我在 mat-form-field 上设置了 appearance="fill"。这些设置为我删除了下划线：

scss：

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

在组件中为ViewEncapsulation.None添加集合封装：

encapsulation: ViewEncapsulation.None

如何删除垫选组件的下划线

6 个答案: