Angular 如何使用customClass在component.css中验证选项卡css样式？

我使用

ngx引导/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>

但这对我不起作用。然后我在angular应用程序的main styles.css中移动了我的css规则，它可以工作，但是这个解决方案对我不好，因为我还有一个组件，其中也包含选项卡

---

为什么它不能从components.css工作？如何从component.css中使用自定义css样式？

在component.css中使用：host/deep/

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

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

---

/deep/

，

和

：：ng deep

选择器在某些时候会在角度上被弃用，因此我不会依赖这些选择器。我知道的唯一方法是将组件

viewenclosuration

设置为

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

---

：host和：host context它没有被弃用，我尝试了

ViewEncapsulation。无

，但此设置在应用程序的另一个位置打破了某些样式。如果我们使用ViewEncapsulation，则确实没有。无我们必须将所有内容都包含在

：host

和

：host context

中。但这些不能用于跳出组件的样式范围，即将样式应用于子组件。但是，如果viewEncapsulation设置为none，我不确定是否可以将

：host

用于css范围。这将是一个更优雅的解决方案。

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

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