angular - 如何使用自定义类覆盖 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 应用程序的 main styles.css 中并且它有效，但这个解决方案对我不利，因为我还有一个组件也包含选项卡。

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

Answer 1

/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,
})