在ngx-bootstrap中自定义选项卡

Question

我正在尝试为ngx-bootstrap的标签添加自定义样式以获得角度。 我想要两件事 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)
}

可能是什么解决方案???

Answer 1

尝试将encapsulation: ViewEncapsulation.None添加到您的组件元数据或使用::ng-deep前缀

::ng-deep .customClass > a {
}

<强> Stackblitz Example

Answer 2

如果要更改“活动”选项卡的CSS，请使用CSS。不要忘记添加！important

.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
  })