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

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

0 голосов
/ 06 мая 2020

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

enter image description here

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

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

и в .s css: 

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

    }
}

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

1 Ответ

1 голос
/ 06 мая 2020

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

...