组件样式不适用于模拟视图封装（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

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

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

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

使用 /deep/ 穿透阴影的后代组合器来强制样式 通过子组件树向下进入所有子组件 意见。 /deep/ 组合器适用于任何深度的嵌套组件， 它适用于视图子项和内容子项 组件。

请参阅https://angular.io/guide/component-styles#deprecated-deep--and-ng-deep 了解更多信息。

不推荐使用穿透阴影的后代组合器，支持 被从主要浏览器和工具中删除。因此，我们计划放弃 Angular 中的支持（适用于 /deep/、>>> 和 ::ng-deep 的所有 3 个）。 直到 那么 ::ng-deep 应该是首选，以获得更广泛的兼容性 工具。

Answer 2

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

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

它们不会被模板内嵌套的任何组件继承，也不会被投射到组件中的任何内容继承。

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

Style scope