我有这个引导标签
<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;
}
`
],
答案 0 :(得分:8)
对于使用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了解演示。
注意:如果未在class="tabset1"
元素上设置属性ngb-tabset
,则应从CSS样式中删除选择器.tabset1
。