нужно отключить фокус <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>

Но небольшая проблема, с которой я сталкиваюсь - Когда я даю внешний вид = "контур", поля вводаобрисованы в общих чертах при выполнении наведения / фокусировки.Я хочу убрать поведение при наведении / фокусировке.

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

Может ли кто-нибудь помочь мне решить эту проблему или дать представление о том, как поступить с этим.

Answer 1

To set a border for the input, include the following in your component.ts:

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

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

In css

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