覆盖外部组件的封装 CSS答案

【问题标题】：Overriding the encapsulated CSS of external component覆盖外部组件的封装 CSS
【发布时间】：2017-03-03 20:20:17
【问题描述】：

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

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

【问题讨论】：

【解决方案1】：

您可以使用特殊的 css /deep/ 指令。 See the documentation

所以，如果你有

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

您可以在您的应用中放入 css（或更少）：

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

显然，您也可以将此 css 片段放入 sub-component。

【讨论】：

/deep/ 已弃用，支持为 removed from major browsers。请参阅Angular documentation。所以我建议在你的 CSS 中写一个同名的类 target-class 并用 !important 属性标记被覆盖的属性。
@LppEdd，根据经验，您应该使用CSS specificity 覆盖以前的声明，并使用!important 属性作为最后的手段（因为它可能已经被使用过）。如果您需要覆盖 !important，请结合使用 CSS specificity 和 !important。
@AlexKlaus 即使具有（显然）更大的特异性，它也不起作用。
从 Angular 8 开始，/deep/fails to compile。 ::ng-deep 仍然有效。我尝试过使用 !important 和 CSS Specificity，但在许多情况下，这两种解决方案都不起作用。

【解决方案2】：

From this article

虽然组件的样式被很好地隔离，但如果需要，它仍然可以很容易地被覆盖。为此，我们只需要在页面正文中添加一个属性：

<body override>
    <app></app>
</body>

属性的名称可以是任何名称。不需要任何值，并且名称覆盖可以清楚地看出它的用途。要覆盖组件样式，我们可以执行以下操作：

[override] hello-world h1 {
    color:red;
}

其中 override 是属性，hello-world 是目标组件，而 h1 是您要重新设置样式的任何内容。（做对了，否则它不会工作）。

您的组件 hello-world 将是

selector: 'hello-world',
styles: [`
   h1 {
      color: blue;
   }
`],
template: ` <h1>Hello world</h1> `

我认为这是最优雅的方式。

或者，如果您正在构建某种库，您可以通过在您的 css 中做一些花哨的事情来完全重置样式：

:host-context(.custom-styles) { //.. css here will only apply when there is a css class custom-styles in any parent elem }

那么要使用你的组件，你会使用

<hello-world class="custom-styles">

但这比第一个选项方便得多。

【讨论】：

【解决方案3】：

::ng-deep .tag-or-css-class-you-want-to-override{

/*添加您的自定义 css 属性值。*/

}

语法::ng-deep 用于在不使用 ViewEncapsulation.None 的情况下覆盖外部 css 类或标签。

【讨论】：

【解决方案4】：

只需检查外部组件应用于选项卡的类（使用 Inspector 或任何其他工具）。在您的样式 css 文件中，为选项卡添加相同的类名称并设置溢出属性，同时添加 !important 以确保它覆盖前一个。还要确保在外部组件 css 链接（如果有）之后添加指向页面的 css 链接。

希望这会有所帮助。

【讨论】：

【解决方案5】：

::ng-deep .css-class-you-want-to-override{

/*您的自定义 css 属性值。如下*/

背景：白色！重要；

}

【讨论】：