组件样式不适用于模拟视图封装（Angular 5）

Question

我在Angular 5应用程序中使用PrimeNG库（https://www.primefaces.org/primeng）并且我意识到，如果我使用ViewEncapsulation.Emulated在Angular组件中使用它的一些控件，我无法向它们应用任何自定义样式。

例如，我在组件中使用p-checkbox控件，我的样式文件中有以下（可怕的）CSS规则：

th {
  background-color: olive !important;
}

.ui-chkbox {
  background-color: aqua !important;
  height: 2.5rem !important;
}

注意：ui-chkbox是包含复选框的DIV。

如果我设置encapsulation: ViewEncapsulation.None，它的外观如下：

如果我改为encapsulation: ViewEncapsulation.Emulated，它看起来像：

正如您所看到的，组件th标记仍然是样式，但复选框组件不是。我认为模拟视图封装旨在“隔离”组件样式，以便它们不会与外部定义的其他类型发生冲突，但似乎它也会影响内部组件。

有人能解释一下这种行为吗？我已经阅读了几个封装教程，但我找不到原因。

谢谢！

Answer 1

如果不使用ViewEncapsulation.None，则无法更改primeng组件样式。

@Component元数据中指定的样式仅适用于该组件的模板。

嵌套在模板中的任何组件或投影到组件中的任何内容都不会继承它们。

您只能定位每个子组件的host元素。您将无法定位组件内使用的任何内部元素。

Answer 2

如果你真的需要，你仍然可以使用已弃用的::ng-deep来定位任何子组件：

:host ::ng-deep .ui-chkbox {
  background-color: aqua !important;
  height: 2.5rem !important;
}

组件样式通常仅适用于组件自己的模板中的HTML。

使用/ deep / shadow-penetcing descendant组合器将样式向下强制通过子组件树到所有子组件视图中。 / deep / combinator适用于任何深度的嵌套组件，它适用于视图子节点和组件的内容子节点。

不推荐使用阴影穿透后代组合器，并且正在从主要浏览器和工具中删除支持。因此，我们计划放弃Angular中的支持（对于/ deep /，>>>和:: ng-deep的所有3个）。在此之前:: ng-deep应该是首选，以便与工具更广泛地兼容。