Как изменить цвет ngb-tabset type = "pills"? - PullRequest
Новая
       8

Как изменить цвет ngb-tabset type = "pills"?

0 голосов
/ 02 сентября 2018

Я использую угловой 6 и нг-бутстрап. Я хочу изменить цвет фона <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 Ответ

0 голосов
/ 02 сентября 2018

Поскольку таблетки находятся в дочернем компоненте ( 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;
}

См. этот стек для демонстрации.

...