Настроить вкладку в ngx-bootstrap

Я пытаюсь добавить индивидуальный стиль на вкладки ngx-bootstrap для angular. Я хочу две вещи: 1) удалить линию границы и 2) сделать цвет фона активной вкладки.

Но ничего не работает

HTML-код

div >
<tabset>
   <tab customClass="customClass" heading="Home"></tab>
   <tab heading="Profile"></tab>
   <tab heading="About us"></tab>
</tabset>
</div>

CSS-код

.customClass > a{
background-color:silver !important;
border-bottom: none !important;
outline: 0 !important; 
}

tab>active{
color:rgb(58, 45, 128)
}

Какое может быть решение???


angular bootstrap-4 ngx-bootstrap twitter-bootstrap-3
person Punit    schedule 09.01.2018    source источник
comment
Помог ли мой ответ?   -  person yurzui    schedule 18.01.2018
comment
очень жаль, но нет, это не помогло   -  person Punit    schedule 07.02.2018
comment
Можете ли вы воспроизвести свою проблему на stackblitz?   -  person yurzui    schedule 07.02.2018

Ответы (2)


arrow_upward
5
arrow_downward

Попробуйте добавить encapsulation: ViewEncapsulation.None к метаданным вашего компонента или используйте префикс ::ng-deep

::ng-deep .customClass > a {
}

Пример Stackblitz

person yurzui    schedule 11.01.2018

arrow_upward
1
arrow_downward

Если вы хотите изменить CSS активных вкладок, вот CSS. Не забудьте добавить! важно

.modal-heading{
background-color: #038F43;
height: 30px;
color: #fff;
margin: 5px 0px 10px 0px;
}
.nav-tabs .nav-link{
background-color: #0d1323;
border: 1px solid #0d1323;
color: #fff;
font-size: 12px;
}
.nav-tabs .nav-link:hover{
background-color: gray;
}

.nav-tabs .nav-link.active{
background-color: #038F43 !important;
color: #fff !important;
font-size: 12px;
}
.nav-tabs .nav-link.active:hover{
background-color: gray;
}



and Small change in .Ts File,Add encapsulation: ViewEncapsulation.None

import { Component, OnInit, ViewEncapsulation } from '@angular/core';
import { BsModalService, BsModalRef } from 'ngx-bootstrap/modal';

@Component({
  selector: 'app-add-edit-golf-league-manager',
  templateUrl: './add-edit-golf-league-manager.component.html',
  styleUrls: ['./add-edit-golf-league-manager.component.css'],
  encapsulation: ViewEncapsulation.None
  })
person harshal medhe    schedule 28.08.2019