需要禁用<mat-form-field>焦点

Question

我是一个新的角度材料，并试图建立一个小的形式。

<form class="example-form">
  <mat-form-field class="example-full-width" appearance="outline" >
    <input matInput placeholder="Favorite food" value="Sushi">
  </mat-form-field>

  <mat-form-field class="example-full-width" appearance="outline">
    <textarea matInput placeholder="Leave a comment"></textarea>
  </mat-form-field>
</form>

但是我面临着一个小问题--当我给appearance="outline“时，输入字段在悬停/聚焦时就会被勾勒出来。我希望删除悬停/焦点行为。

https://eaadmxqgrggv.angular.stackblitz.io/

有没有人可以帮我解决这个问题，或者给我一个如何处理这个问题的见解。

Answer 1

这个CSS应该可以完成这项工作：

    ::ng-deep .mat-form-field-appearance-outline .mat-form-field-outline-end,
    ::ng-deep .mat-form-field-appearance-outline .mat-form-field-outline-start {
        border-width: 1px !important;
        color: #e0e0e0;
    }

备注:应避免将encapsulation设置为ViewEncapsulation.None，而应在CSS中使用::ng-deep。

Answer 2

要为输入设置边框，请在component.ts中包含以下内容：

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

@Component({
    ....
    encapsulation: ViewEncapsulation.None
})

在css中

.mat-form-field-appearance-outline .mat-form-field-outline {
   color: rgba(0,0,0,.12);
   border:0
}