Angular ：一个组件的 CSS 与另一个组件冲突。

Question

我的项目层次结构如下：

Component_HomePage
   |
   |---> Component_Tool1
   |        |
   |        ---> Component_Inner_01
   |
   |---> Component_Tool2
            |
            ---> Component_Inner_02

显然所有组件都有不同的样式。

虽然有一些CSS类Component_Inner_01和Component_Inner_02他们的名字是相同的，但内容是不同的。

例如：

Component_Inner_01.CSS 有list-group-item类

.list-group-item{
    padding: 0px;
}

Component_Inner_02.CSS 也有，list-group-item但内容不同。

.list-group-item{
    padding: 10px;
}

所以当我第一次浏览Component_Inner_01list-group-item时，padding为0px，非常完美。

但是当我在查看Component_Inner_01页面后查看Component_Inner_02页面时，Component_Inner_01 的 list-group-item 类将填充为 10px。

我发现问题出在 Component_Inner_02

Component_Inner_02 的装饰器的元数据encapsulation设置为ViewEncapsulation.None

但是我不知道是什么让 CSS 类在使用时相互冲突encapsulation: ViewEncapsulation.None，谁能解释一下？

Answer 1

视图封装意味着您的视图被封装了：这意味着 Angular 会向您的标签添加随机属性，以将它们区别开来。

如果您使用encapsulation: ViewEncapsulation.None，那么您的视图不再被封装：样式没有随机属性，并且开始发生冲突。

如果您想停止该操作，请从您的组件中删除该行。

CLI 提供了一个全局样式表style.[extension]，您可以在其中放置所有全局样式。您不需要停用封装。