我正在尝试将outline的{{1}}颜色更改。
mat-form-field但是这不起作用。使用 :host /deep/ .mat-form-field-appearance-outline :host /deep/ .mat-form-field-outline {
color: white;
}
似乎是个问题，因为以下方法可以正常工作：
:host但是，如果我不使用/deep/ .mat-form-field-appearance-outline /deep/ .mat-form-field-outline {
color: white;
}
，则此样式也将应用于其他组件。我不确定为什么:host无法正常工作。
答案 0 :(得分：1)
以下代码的问题是第二个: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;
}
以上概念已in here进行了解释
将:: ng-deep伪类完全应用于任何CSS规则 禁用该规则的视图封装。任何带有:: ng-deep的样式 应用成为一种全球风格。为了确定指定样式的范围 到当前组件及其所有后代，请确保包括 :: ng-deep之前的：host选择器。如果:: ng-deep组合器是 如果不使用：host伪类选择器，则样式可能会渗入 其他组件。
因此，当您在任何CSS选择器上使用:host /deep/时，它将选择当前组件及其子组件中的元素。为了防止它影响任何子级，您应该通过向要选择的元素添加自定义类并将其与:host /deep/选择器组合在一起，使选择器更具体；
:host /deep/ .redOutline.mat-form-field-appearance-outline .mat-form-field-outline {
color: white;
}
并将redOutline类添加到要选择的mat-form-field元素中。