Удалить границу поля mat-form с вводом (также для наведения и фокуса)

Question

Мне сложно укладывать свой mat-form-field.
Я хочу удалить границу из поля, даже когда поле сфокусировано, а пользователь наведен. Прямо сейчас у меня есть это:

и мне нужно удалить эту границу за пределами моего ввода. Это мое поле формы:

<mat-form-field class="search-field" appearance="outline">
  <mat-label>Search</mat-label>
  <input matInput type="text" >
  <mat-icon matSuffix>search</mat-icon>
</mat-form-field>

и в.scss:

mat-form-field.search-field {
    .mat-form-field-flex {
        background-color: white;
        border-radius: 2rem;
        color: transparent;

        .mat-form-field-appearance-outline.mat-focused .mat-form-field-outline-thick {
            border-style: none;
        }

    }
}

"Первый" стиль применяется правильно, но не стиль границы.
Также я не совсем уверен, что это лучший способ стилизовать его, но в документации нет указаний на то, как изменить все эти части.

Answer 1

Многие стили материала усилены !importantфлаг. Вы можете попытаться перезаписать их, используя!importantв вашем коде, что я бы не рекомендовал, поскольку он может даже не работать. Вы можете попробовать использовать::ng-deep, хотя. Материальные элементы на самом деле не подлежат модификации, так что в любом случае вам придется "взломать" их. Удачи:)