:主机样式未应用于Angular6

Question

我正在尝试更改mat-form-field的outline颜色。

 :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，则此样式也将应用于其他组件。我不确定:host为什么不起作用。

Answer 1

以下代码的问题是第二个:host选择器。因为匹配.mat-form-field-appearance-outline

之后，它无法匹配任何主机元素

:host /deep/ .mat-form-field-appearance-outline :host /deep/ .mat-form-field-outline {
    color: white;
}

当第二个:host选择器被删除时，它以将样式应用于当前组件及其所有孩子的方式工作。(BTW第二/deep/选择器也不需要(

以下代码与上一个代码的不同之处在于，没有:host选择器使得这种样式真正的全局。因此，它应用了组件树中的所有组件。IE。所有祖先和孩子。

/deep/ .mat-form-field-appearance-outline /deep/ .mat-form-field-outline {
    color: white;
}

上面的概念在此处解释

将:: ng-deep伪级应用于任何CSS规则 禁用该规则的查看安装。:: ng-deep的任何风格 应用成为一种全球风格。为了范围范围 对于当前组件及其所有后代，请确保包括 :: ng-deep之前：主机选择器。如果:: ng-deep Comminator是 没有：主机伪级选择器，样式可以流血 其他组件。

因此，当您在任何CSS选择器上使用:host /deep/时，它会在当前组件及其子女中选择元素。为了防止它影响任何孩子，您应该通过在要选择的元素中添加自定义类，并将其与: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