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

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

materialize angular css

dmance · 技术社区 · 6 年前

我使用的是带有角度6的Materialzecss。我没有使用NG2 Materialize,只是使用MaterializeCSS库。

问题是当我试图改变标签指示器的背景色,修改组件的CSS时。我要用!很重要,但它是一样的。

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

谢谢。

3 回复 | 直到 6 年前

Sunil Singh 6 年前

使用 /deep/ 覆盖现有样式的步骤

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

Shiv Kumar Baghel 6 年前

它改变了颜色。我只是用标签 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>

Juan Sánchez 6 年前

我喜欢@sunil singh的答案,但您是对的,这些选择器已被弃用,下面是我的解决方法:

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

推荐文章

Reegan · 使用Angular ngFor指令在html中渲染嵌套对象值

3 月前

user3472810 · Angular@Output/EventEmitter返回undefined

4 月前

Lorenzo Bertolaccini · 在Angular项目中通过对话框后,在控制台中显示但在HTML中不显示的数据数组

4 月前

Jihed Ben Zarb · 造型角材料日期选择器

5 月前

st_clair_clarke · 为angular v19资源API创建可重复使用的加载器,其中包含2个不同类型的请求参数

5 月前

Ajay Kulkarni · Angular 19-重新路由到子路由未按预期工作

5 月前

Ajay Kulkarni · 路由器与导航上的路线不匹配

5 月前

Jace Johnson · Typescript文件读取的变量类型错误

5 月前

Ole · Angular资源API是否支持为资源添加初始值?

5 月前

Ole · 在使用新的Angular Resource API时取消搜索术语?

5 月前