时间戳

首页 > 解决方案 > 如何更改 ngb-tabset type="pills" 的颜色？

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

问题描述

我正在使用 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那些是内联样式，我也无法覆盖它们。我不知道它们在哪里，搜索了整个项目都找不到它们。

标签： angularangular6ng-bootstrap

解决方案

由于药丸位于子组件（NgbTabset）中，因此您必须使用穿透阴影的后代组合器来应用样式。目前，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;
}

请参阅此 stackblitz以获取演示。

推荐阅读