文章/答案/技术大牛

发布

社区首页 >问答首页 >组件样式不适用于仿真视图封装(角5)

问组件样式不适用于仿真视图封装(角5)
EN

Stack Overflow用户

提问于 2018-04-23 13:59:29

回答 2查看 2.7K关注 0票数 2

我在一个角5应用程序中使用PrimeNG库(https://www.primefaces.org/primeng)，我已经意识到，如果我在一个带有ViewEncapsulation.Emulated的角组件中使用它的一些控件，我就不能对它们应用任何自定义样式。

例如，我在组件中使用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标记仍然是样式化的，但是复选框组件不是。我认为模拟视图封装的目的是“隔离”组件样式，这样它们就不会与外部定义的其他组件发生冲突，但它似乎也会影响内部组件。

有人能解释一下这种行为吗？我读过一些封装教程，但是我找不到原因。

谢谢!

angular

回答 2

Stack Overflow用户

回答已采纳

发布于 2018-04-23 14:02:09

如果不使用ViewEncapsulation.None，就不能更改primeng组件样式。

@Component元数据中指定的样式仅适用于该组件的模板。它们是，不是由模板中嵌套的任何组件继承的，也不是由投射到组件中的任何内容继承的。

只能针对每个子组件的主机元素。您将无法针对组件中使用的任何内部元素。

样式范围

票数 -2

Stack Overflow用户

发布于 2018-04-23 14:20:05

如果确实需要，则仍然可以使用不推荐的::ng-deep来针对任何子组件：

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

组件样式通常只应用于组件自己的模板中的HTML。使用/深度/穿透阴影的子代组合器强制样式通过子组件树向下进入所有子组件视图。/deep/ combinator适用于嵌套组件的任何深度，它同时适用于组件的视图子元素和内容子组件。

有关更多信息，请参见https://angular.io/guide/component-styles#deprecated-deep--and-ng-deep。

穿透阴影的后代组合器被废弃，支持正在从主要的浏览器和工具中删除。因此，我们计划在角度上放弃支持(对于/deep/，>>>和：：ng-深层的所有3种支持)。在此之前，应该是的首选，因为它与工具具有更广泛的兼容性。

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/49983054

复制

相似问题

问组件样式不适用于仿真视图封装(角5)
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问组件样式不适用于仿真视图封装(角5)EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问组件样式不适用于仿真视图封装(角5)
EN