如何更改ngb-tabset type=&Q；药丸&Q；的颜色？ [英] How to change the color of ngb-tabset type="pills"?

问题描述

我使用的是角度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;
}

即使我使用!important那些内联样式，我也不能覆盖component.scss中的那些样式。我不知道它们在哪里，整个项目都找不到它们。

推荐答案

由于药丸位于子组件(NgbTabset)中，因此您必须使用shadow-piercing descendant combinator来应用样式。目前，Angel推荐使用::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=&Q；药丸&Q；的颜色？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！