时间戳

首页 > 解决方案 > Angular ：一个组件的 CSS 与另一个组件冲突。

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

问题描述

我的项目层次结构如下：

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

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

Component_Inner_01虽然&中有一些 CSS 类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，有人可以解释一下吗？

标签： cssangular

解决方案

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

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

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

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

推荐阅读