Как стилизовать Angular Material mat-form-field/matInputCSS

Разбираемся в CSS
Anonymous
Как стилизовать Angular Material mat-form-field/matInput

Сообщение Anonymous »

Я использую последнюю версию материала Angular (v16) и пытаюсь стилизовать matInput (внутри поля mat-form-field), и у меня возникают некоторые проблемы с поведением. Я просто хочу переопределить цвет ввода, когда я не прикасался. Я также хочу изменить цвет заполнителя и метки мата.
Какие решения мне нужно изменить, чтобы изменить только цвет границы, но не повлиять на поведение компонента материала?
Я нашел решение с ng-deep, которое работает частично, но стиль остается примененным, даже если входные данные имеют ошибку или сфокусированы. Он всегда сохраняет этот зеленый цвет для границы, но если есть ошибки, я хочу, чтобы граница была красного цвета, если она в фокусе, я хочу иметь цвет по умолчанию для фокуса (в данном случае синий).
::ng-deep .mdc-notched-outline__leading {
border-color: green !important;
}
::ng-deep .mdc-notched-outline__notch {
border-color: green !important;
}
::ng-deep .mdc-notched-outline__trailing {
border-color: green !important;
}


Подробнее здесь: https://stackoverflow.com/questions/772 ... d-matinput

Вернуться в «CSS»