无法修改选项卡指示器颜色

Question

我正在使用 materializecss 和 Angular 6。我没有使用 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

它正在改变颜色。我只是使用没有 angularjs

的标签

  $(document).ready(function(){
    $('.tabs').tabs();
  });

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

<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" />

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>


</head>
<body>
<div class="row">
<div class="col s12 m12 l12 xl12">
  <!-- <ul class="tabs tabs-fixed-width" id="chartstabs">
    <li class="tab">
      <a href="#tab" (click)="loadTab(view)">okkk</a>
    </li>
  </ul> -->
  
  
<ul class="tabs tabs-fixed-width tab-demo z-depth-1" id="chartstabs">
    <li class="tab"><a href="#test1">Test 1</a></li>
    <li class="tab"><a class="active" href="#test2">Test 2</a></li>
    <li class="tab disabled"><a href="#test3">Disabled Tab</a></li>
    <li class="tab"><a href="#test4">Test 4</a></li>
    <li class="tab"><a href="#test0">Test 5</a></li>
  </ul>
  <div id="test1" class="col s12"><p>Test 1</p></div>
  <div id="test2" class="col s12"><p>Test 2</p></div>
  <div id="test3" class="col s12"><p>Test 3</p></div>
  <div id="test4" class="col s12"><p>Test 4</p></div>
  <div id="test0" class="col s12"><p>Test 5</p></div>
  
  
</div>

</div>

Answer 2

Use /deep/ to overwrite the existing styles

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

Answer 3

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

只需将 css 规则放在附加到 index.html 的根 styles.css 中，这样指标就会受到影响。如果您想控制该规则的特定页面，您可以在每个选项卡组件中使用 ids。

无法修改选项卡指示器颜色

Can not modify tab indicator color

css

materialize

angular