Как сделать высоту подчеркивания mat-form-field-underline 0 в Angular 6+

Question

В настоящее время я работаю над угловыми материалами, используя угловой 7. Как мы можем отрегулировать высоту подчеркивания mat-form-field-under и, следовательно, дополнительно задать границу вокруг поля выбора .

<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 является родительским делением.Но я не вижу никакой разницы.

Спасибо.

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