覆盖外部组件封装的CSS

Question

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

因此，我在项目中使用 material2，并且选项卡组件在

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

中。

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 只影响该组件。要影响其他组件，您需要一些全局 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

。

Answer 5

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

希望这有帮助。

Answer 6

::ng-deep .css-class-you-want-to-override {
  /*your custom css property value. like below */  
  background: white !important;
}

覆盖外部组件封装的CSS

问题描述投票：0回答：6

6个回答

最新问题

覆盖外部组件封装的CSS

问题描述 投票：0回答：6

6个回答

最新问题

问题描述投票：0回答：6