时间戳

首页 > 解决方案 > 如何在Angular 6+中使mat-form-field-underline 0的高度

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

问题描述

我目前正在使用 angular 7 处理有角材料。我们如何调整 mat-form-field-underline 的高度，从而进一步在选择框周围设置边框。

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

这里的link-1是父分区。但我没有发现任何区别。

谢谢你。

标签： cssangulartypescriptangular7

解决方案

试试下面的。基本上你需要使用::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;
     }

推荐阅读