Angular 6 - ng-bootstrap - 样式选项卡

Question

我正在使用这个Bootstrap选项卡

<ngb-tabset>
    <ngb-tab title="Tab 1">
        <ng-template ngbTabContent>
            Tab 1
        </ng-template>
    </ngb-tab>
    <ngb-tab title="Tab 2">
        <ng-template ngbTabContent>
            Tab 2
        </ng-template>
    </ngb-tab>
</ngb-tabset>

选项卡上的文本颜色为蓝色。我知道如果创建全局样式，可以覆盖默认设置。但我想从父组件中设置选项卡样式。

我知道可以样式化子组件，但在这种情况下不起作用（如何从父组件的CSS文件中样式化子组件？）。有什么建议吗？

styles: [
`
 :host { color: red; }

 :host ::ng-deep parent {
   color:blue;
 }
 :host ::ng-deep child{
   color:orange;
 }
 :host ::ng-deep child.class1 {
   color:yellow;
 }
 :host ::ng-deep child.class2{
   color:pink;
 }
`
],

- Michalis

Answer 1

对于使用ng-bootstrap标签页的以下模板：

<ngb-tabset class="tabset1">
    <ngb-tab title="Tab 1">
        <ng-template ngbTabContent>
            Tab 1
        </ng-template>
    </ngb-tab>
    <ngb-tab title="Tab 2">
        <ng-template ngbTabContent>
            Tab 2
        </ng-template>
    </ngb-tab>
</ngb-tabset>

你可以使用这些CSS规则覆盖默认的选项卡标题样式：

:host ::ng-deep .tabset1 a.nav-link {
  color: green;
}

:host ::ng-deep .tabset1 a.nav-link.active {
  color: red;
  font-weight: bold;
}

请查看此StackBlitz以获取演示。

注意：如果在ngb-tabset元素上未设置属性class="tabset1"，则应从CSS样式中删除选择器.tabset1。

- ConnorsFan