如何改变ngb-tabset type =“pills”的颜色？

Question

我正在使用角度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），你必须使用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。