проблема со следующим кодом - второй селектор :host. потому что он не может соответствовать ни одному элементу хоста после соответствия .mat-form-field-appearance-outline
:host /deep/ .mat-form-field-appearance-outline :host /deep/ .mat-form-field-outline {
color: white;
}
при удалении второго селектора :host он работает таким образом, что применяет стили к текущему компоненту и всем его дочерним элементам. (кстати, второй /deep/ селектор также не нужен)
следующий код отличается от предыдущего тем, что отсутствие селектора :host делает этот стиль действительно глобальным. поэтому он применяет все компоненты в дереве компонентов. то есть. все предки и дети.
/deep/ .mat-form-field-appearance-outline /deep/ .mat-form-field-outline {
color: white;
}
выше объяснены понятия здесь
Применение псевдокласса :: ng-deep к любому правилу CSS полностью
отключает вид-инкапсуляцию для этого правила. Любой стиль с :: ng-deep
применяется становится глобальным стилем. Для того, чтобы охватить указанный стиль
к текущему компоненту и всем его потомкам, обязательно включите
селектор хоста перед :: ng-deep. Если комбинатор :: ng-deep
используется без селектора псевдо-класса:
другие компоненты.
, поэтому, когда вы используете :host /deep/ в любом селекторе CSS, он выбирает элементы в текущем компоненте и его дочерних элементах. чтобы предотвратить его влияние на дочерние элементы, вы должны сделать свой селектор более конкретным, добавив пользовательский класс к элементам, которые хотите выбрать, и объедините его с селектором :host /deep/, таким образом;
:host /deep/ .redOutline.mat-form-field-appearance-outline .mat-form-field-outline {
color: white;
}
и добавьте класс redOutline к mat-form-field элементам, которые вы хотите выбрать.
вот рабочая демоверсия https://stackblitz.com/edit/angular-qy7g4r