如何在Angular 6+中使mat-form-field-underline 0的高度

Question

我目前正在使用角7加工角材料。我们如何调整垫形场下划线的高度，从而进一步在选择框周围给出边框< / strong>。

<mat-form-field>
    <mat-select>
        <mat-option *ngFor="let type of types" [value]="type.value">{{type.viewValue}}</mat-option>
    </mat-select>
</mat-form-field>

我尝试使用以下方式提供CSS：

.link-1 .mat-form-field-underline{ 
    height: 0px !important;
}

链接-1 是父部门。但是我没有发现任何区别。

谢谢。

Answer 1

尝试以下方法。基本上，您需要使用::ng-deep

// You can use /deep/ also
::ng-deep .mat-form-field-underline {
  // background: red !important;
  height: 0 !important;
}

以防万一您对弃用警告感到不安，可以将ViewEncapsulation设置为None，如下所示：

    import {Component, ViewEncapsulation} from '@angular/core';

    @Component({
      selector: 'form-example',
      templateUrl: 'form-example.html',
      styleUrls: ['form-example.css'],
      encapsulation: ViewEncapsulation.None
    })

    .mat-form-field-underline {
     height: 0 !important;
     }