如何更改ngb-tabset type="pills"的颜色？

Question

我正在使用 angular 6 和 ng-bootstrap。我想更改 <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 这些是内联样式。我不知道他们在哪里，找遍了整个项目也没找到。

Answer 1

由于药丸在子组件中（NgbTabset), you have to use a 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。

如何更改ngb-tabset type="pills"的颜色？

How to change the color of ngb-tabset type="pills"?

ng-bootstrap

angular

angular6