Angular2-Material Изменить стиль ввода MD на ошибки

Question

Я бы, в случае ошибки в моей форме, изменил метку своего ввода, а также цвет текста и цвет рамки ниже, так же, как с dividerColor, но без фокуса, я бы хотел, чтобы это сохранялось.

Поэтому я сделал этот код для метки:

md-input:not(.ng-valid) label { background-color: red !important; color:red !important; }

Однако, когда я запускаю проект, мой CSS изменяется следующим образом:

md-input[_ngcontent-fcu-13]:not(.ng-valid) label[_ngcontent-fcu-13] { background-color: red !important; color:red !important; } 

И, следовательно, это не работает. У тебя есть идея? (Переведено гугл переводом)

Answer 1

Вы пытаетесь использовать эти стили вне дерева компонентов, в котором вы их описываете? Такие атрибуты, как _ngcontent-fcu-13 angular, добавляют к элементам и стилям DOM для реализации View Encapsulation. Поэтому, если вы импортируете стили как часть метаданных компонента angular, вы добавите такие атрибуты ко всем стилям.

Вы должны переместить глобальные стили в app.component или внедрить их непосредственно в index.html.

Также вы можете отключить просмотр инкапсуляции, добавив

encapsulation: ViewEncapsulation.None

в метаданные компонента

Посмотрите на эту статью. Это мне очень помогает.