Search code examples
cssangularmaterialize

Can not modify tab indicator color

I am using materializecss with Angular 6. I am not using ng2-materilize, just the materializecss library.

The problem is when I try to change the tab indicator background color modifying the css of the component. I algo use !important but it is the same.

<div class="row">
<div class="col s12 m12 l12 xl12">
  <ul class="tabs tabs-fixed-width" id="chartstabs">
    <li class="tab" *ngFor="let view of views">
      <a href="#tab{{view.id}}" (click)="loadTab(view)">{{view.name}}</a>
    </li>
  </ul>
</div>

And this is my css.

.tabs {
    overflow-x: hidden !important;
}
.tabs .indicator {
    background-color: blue !important;
}

Thanks.

Solution

  • Use /deep/ to overwrite the existing styles

    /deep/ .tabs {
    overflow-x: hidden !important;
}
/deep/ .tabs .indicator {
    background-color: blue !important;
}