如何使用自定义类覆盖 component.css 中的制表符 css 阶梯？

Question

我使用 ngx-bootstrap/tabs 制表符。

这是我的 HTML-模板：

<tabset [justified]="true">
  <tab heading="About" customClass="about-tab">
    <app-about></app-about>
  </tab>
  <tab heading="Projects" customClass="projects-tab">
    <app-projects></app-projects>
  </tab>
</tabset>

使用我的自定义 css 类我会覆盖默认的选项卡样式。在我的 component.css 中，我定义了 css 规则，如下所示：

.about-tab {
  background-color: #c7c7c7;
  // more rules
}

.projects-tab {
  background-color: #e5e5e5;
  // more rules
}

但这对我不起作用。然后我将我的 css 规则移动到我的 angular 应用程序的主 styles.css 中并且它有效，但这个解决方案对我来说并不好，因为我还有一个组件也包含选项卡。

为什么它在 components.css 中不起作用？如何使用 component.css 中的自定义 css 样式？

Answer 1

在你的 component.css

中使用 :host /deep/

:host /deep/ .about-tab {
  background-color: #c7c7c7;
  // more rules
}

:host /deep/ .projects-tab {
  background-color: #e5e5e5;
  // more rules
}

Answer 2

/deep/、>>> 和 ::ng-deep 选择器在某些时候将在 Angular 中弃用，因此我不会依赖它们。我知道的唯一方法是将组件 viewEncapsulation 设置为 none，但一定要将样式专门包装到您的组件中，这样它们就不会泄漏，因为样式已添加到全局 css范围。

import { Component, ViewEncapsulation } from '@angular/core';

@Component({
    selector: 'app-component',
    templateUrl: './app-component.component.html',
    styleUrls: ['./app-component.component.scss'],
    encapsulation: ViewEncapsulation.None,
})

如何使用自定义类覆盖 component.css 中的制表符 css 阶梯？

How can I ovveride tabs css styles in component.css by using customClass?

ngx-bootstrap

angular