css - Angular 7 : Why class style is not applied to DOM component?

Question

我有一个包含 ngb-tabset 的组件账单Ng Bootstrap 的组件。

ngb-tabset具有以下 DOM 元素:

<ngb-tabset _ngcontent-c3="" class="content">
  <!-- Tabset links-->
  <div class="tab-content">
    <div _ngcontent-c3="">
      <!-- Content -->
    </div>
  </div>
</ngb-tabset>

<div class="tab-content">根据选择的标签动态显示。

在我的 billing.component.scss ，以下代码段不起作用:

.tab-content {
  padding-right: 120px;
}

CSS 代码已正确编译，并且通常可被导航器看到，但不会影响元素。

但如果我将它应用于组件外部的元素，代码将正常工作。

对这种奇怪的行为有什么想法吗？

Answer 1

方法一——在标签内容模板中设置样式类

View encapsulation隔离每个组件的 CSS 样式，防止父组件 CSS 影响子组件。当前情况下的首选解决方案是在选项卡内容模板定义中设置样式类。这是一个例子:

<ngb-tabset>
  <ngb-tab title="Simple">
    <ng-template ngbTabContent>
      <div class="my-style-1">
        <p>Some content</p>
      </div>
    </ng-template>
  </ngb-tab>
  ...
</ngb-tabset>

.my-style-1 {
  padding-right: 120px;
  color: magenta;
  font-style: italic;
}

参见 this stackblitz用于演示。

---

方法二——使用::ng-deep伪类选择器

另一种方法是使用::ng-deep shadow-piercing 后代组合子来style NgbTabset 子组件的内容:

::ng-deep .tab-content {
  padding-right: 120px;
}

参见 this stackblitz用于演示。

---

方法三——关闭 View 封装

或者，您可以关闭父组件的 View 封装:

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

@Component({
  ...
  encapsulation: ViewEncapsulation.None
})

参见 this stackblitz用于演示。