Angular 6 - ng-bootstrap - 样式标签

Posted 2023-03-06

【中文标题】Angular 6 - ng-bootstrap - 样式标签

【英文标题】：Angular 6 - ng-bootstrap - Style Tabs

【发布时间】：2018-11-13 04:31:54

【问题描述】：

我有这个引导标签

<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>

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

我知道我可以设置子组件的样式，但在这种情况下它不起作用 (How to style child components from parent component's css file?)。有什么建议吗？

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

【参考方案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;

请参阅this stackblitz 以获取演示。

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