代码之家  ›  专栏  ›  技术社区  ›  Lynob

如何更改ngb tabset type=“pills”的颜色?

  •  2
  • Lynob  · 技术社区  · 6 年前

    我用的是angular 6和ng引导。我想改变背景色 <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 回复  |  直到 6 年前
        1
  •  6
  •   ConnorsFan    6 年前

    因为药片是儿童成分( NgbTabset ),你必须使用 shadow-piercing descendant combinator 应用样式。目前,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;
    }
    

    看到了吗 this stackblitz 演示一下。