组件样式不适用于模拟视图封装（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 / shadow-penetcing后代组合器强制样式   通过子组件树进入所有子组件   观点。 / deep / combinator适用于任何深度的嵌套组件，   它适用于视图子节点和内容子节点   成分

有关详情，请参阅https://angular.io/guide/component-styles#deprecated-deep--and-ng-deep。

  

阴影穿透后代组合子已被弃用且支持   从主要浏览器和工具中删除。因此我们打算放弃   支持Angular（对于所有3个/ deep /，＆gt;＆gt;＆gt;和:: ng-deep）。的直到   那么:: ng-deep应该是首选以获得更广泛的兼容性   工具。

Answer 2

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

  

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

     

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

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

Style scope