覆盖外部组件的封装CSS

Question

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

所以我在我的项目中使用material2,而tabs组件有一个属性溢出设置tab-body.是否可以覆盖溢出值？

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.

不推荐使用`/ deep /`并且正在从主流浏览器中删除支持(https://www.chromestatus.com/features/6750456638341120).请参阅[Angular文档](https://angular.io/guide/component-styles#deprecated-deep--and-ng-deep).因此,我建议在CSS中编写一个名为`target-class`的类,并使用[!important]标记重写的属性(https://developer.mozilla.org/en-US/docs/Web/ CSS/Specificity#The_!important_exception)属性. (5认同)
从 Angular 8 开始，`/deep/` [无法编译](https://github.com/angular/angular/issues/30815)。`::ng-deep` 仍然有效。我尝试过使用 !important 和 CSS Specificity，但在许多情况下这两种解决方案都不起作用。 (3认同)
@LppEdd，根据经验，您应该使用 [CSS specificity](https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity) 来覆盖以前的声明并使用 [!important] (https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity#The_!important_exception) 属性作为最后的手段（因为它可能已经被使用）。如果您需要覆盖 `!important`，请结合使用 _CSS specificity_ 和 `!important`。 (2认同)

Answer 2

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

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

::ng-deep .tag-or-css-class-you-want-to-override {    
   /* Add your custom css property value. */    
}

该语法::ng-deep用于覆盖外部 css 类或标签，而不使用 ViewEncapsulation.None。

Answer 4

我看到这个问题有很多变体，因为这是该主题的首要问题，所以我想给出最简单的答案。ng-deep并且类似的功能已被弃用，因此最好仅依赖普通 CSS。

只需创建一个具有更高特异性的 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 具有比原始 CSS 更高的特异性。

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

没起作用？加上另一个.className。