Angular 6 - ng-bootstrap - 樣式選項卡

Question

我有這個引導標簽

<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;
 }
`
],

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 。