覆盖外部组件的封装 CSS

Question

我想知道如何覆盖外部组件的封装 CSS。

所以我在我的项目中使用 material2 ，并且选项卡组件在 tab-body 上设置了属性溢出。是否可以覆盖溢出值？

原文由 Salma Hamed 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您可以使用特殊的 css /deep/ 指令。 请参阅文档

所以，如果你有

app
  sub-component
    target-component
      <div class="target-class">...</div>

您可以放入您的应用程序 css（或更少）：

 /deep/ .target-class {
  width: 20px;
  background: #ff0000;
}

显然，你也可以把这个css片段放在 sub-component 中。

原文由 Meir 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

我经常看到这个问题的变体，因为这是该主题的首要问题，所以我想给出最简单的答案。 ng-deep 类似的功能已被弃用，所以最好只依赖原版 CSS。

只需创建一个具有更高特异性的 CSS 选择器。

大多数人（包括我自己）都会因为不明白两件事而被挂断：

1. 角度视图封装
2. CSS 特异性

---

角度视图封装

视图封装确保组件内的 CSS 仅影响该组件。要影响其他组件，您需要一些全局 CSS。您可以通过使用全局样式文件（如 styles.css 或禁用组件上的视图封装来执行此操作。

 @Component({
  ...
  encapsulation: ViewEncapsulation.None
})

---

CSS 特异性

当两个选择器选择相同的元素时，实际应用的 CSS 是基于特异性的： https ://developer.mozilla.org/en-US/docs/Web/CSS/Specificity

您可以通过简单地向 CSS 选择器添加更多元素来增加特异性。例如 p.className 比 .className 更具体。如果你很懒，你可以重复一个类名来增加特异性。 .className.className 比 .className 更具体。

---

因此，要覆盖 Angular 项目中的任何 CSS，请进入 styles.css 并重复类选择器，直到您的 CSS 具有比原来更高的特异性。

 .className.className.className {
  color: red;
}

没用？添加另一个 .className 。

原文由 Chris Hamilton 发布，翻译遵循 CC BY-SA 4.0 许可协议