Question

我在Angular 6中使用了materializecss。我没有在使用ng2-materilize，而是在materializecss库中使用了。

问题是当我尝试更改选项卡指示器背景颜色以修改组件的CSS时。我总是使用！important，但这是相同的。

<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>

这是我的CSS。

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

谢谢。

Answer 1

它改变颜色。我只是使用没有react scripts start

的标签

./app.js

./bin/www

angularjs

Answer 2

使用/deep/覆盖现有样式

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

Answer 3

我喜欢@Sunil Singh的答案，但是您是对的，那些选择器已被弃用，所以这是我的解决方法：

只需将css规则放在index.html附加的根styles.css中，那么该指示符将受到影响。如果要控制该规则的特定页面，可以在每个选项卡组件中使用ID。

无法修改标签指示符颜色

3 个答案: