【问题标题】：Customize tab in ngx-bootstrapngx-bootstrap 中的自定义选项卡
【发布时间】：2018-06-18 20:57:39
【问题描述】：

我正在尝试将自定义样式添加到 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)
}

有什么解决办法？？？

【问题讨论】：

我的回答有帮助吗？
非常抱歉，但没有帮助
你能在 stackblitz 上重现你的问题吗？

标签： angular twitter-bootstrap-3 bootstrap-4 ngx-bootstrap

【解决方案1】：

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

::ng-deep .customClass > a {
}

Stackblitz Example

【讨论】：

【解决方案2】：

如果您想更改活动标签的 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
  })

【讨论】：