代码之家 › 专栏 › 技术社区 › Lynob

如何更改ngb tabset type=“pills”的颜色?

ng-bootstrap angular6 angular

2

Lynob · 技术社区 · 6 年前

我用的是angular 6和ng引导。我想改变背景色 <ngb-tabset type="pills">

.nav-fill .nav-link.active {
    margin-top: -1px;
    border-top: 2px solid #20a8d8;
}

.nav-pills .nav-link.active, .nav-pills .show > .nav-link {
    color: #fff;
    background-color: #20a8d8;
}

component.scss 即使我使用 !important

1 回复 | 直到 6 年前

1

6

ConnorsFan 6 年前

因为药片是儿童成分( NgbTabset ),你必须使用 shadow-piercing descendant combinator 应用样式。目前,Angular建议使用 ::ng-deep :

::ng-deep .nav-fill .nav-link.active {
    margin-top: -1px;
    border-top: 2px solid #20a8d8;
}

::ng-deep .nav-pills .nav-link.active, 
::ng-deep .nav-pills .show > .nav-link {
    color: #fff;
    background-color: #20a8d8;
}

看到了吗 this stackblitz 演示一下。