Question

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

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

Answer 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中。

Answer 2

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

希望这有帮助。

Answer 3

尽管组件的样式很好地隔离了，但是如果需要，仍然可以轻松地覆盖它。为此，我们只需要向页面正文添加一个属性即可：

<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">

但是，这比第一种方法要方便得多。

Answer 4

:: ng-deep .css-class您要覆盖{

/ *您的自定义CSS属性值。像下面的* /

背景：白色！很重要；

}

Answer 5

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

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

}

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