如何更改活动标签的墨盒颜色？

Question

是否可以更改活动标签的墨盒颜色？

默认情况下,墨水条为蓝色.请看这里的例子.

我在SCSS中尝试了这个,但它不起作用.

.mat-tab-label-container{
  .mat-tab-list{
    .mat-ink-bar {
      background-color: green
    }
  }
}

.mat-tab-label-active{
 color: green 
}

有人可以帮忙,

Answer 1

这可能类似于您想要实现的目标

请看这个链接(不能没有:: ng-deep和!important的样式mat-tab)和upvote如果它对你有所帮助,我认为这与你想要实现的类似.

回答你的问题

您需要使用Selector特性,然后将您的样式放在根样式/src/styles.css中(注意:不要将它放在组件styleUrls中,您的样式将无效)

设置墨水条的样式

.mat-tab-group.mat-primary .mat-ink-bar, .mat-tab-nav-bar.mat-primary .mat-ink-bar{
  background: yellow;
  height: 10px;
} 

将墨水条从下划线更改为覆盖项目的椭圆形

您可以尝试使用此代码使其成为椭圆形以覆盖项目.

/* label style */
.mat-tab-label{
  background: #e7e7e7;
  color:  black;
  min-width: 60px!important;
}
/* focus style */
.mat-tab-group.mat-primary .mat-tab-label:not(.mat-tab-disabled):focus, .mat-tab-group.mat-primary .mat-tab-link:not(.mat-tab-disabled):focus, .mat-tab-nav-bar.mat-primary .mat-tab-label:not(.mat-tab-disabled):focus, .mat-tab-nav-bar.mat-primary .mat-tab-link:not(.mat-tab-disabled):focus{
  background: #e7e7e7;
}
/* ink bar style */
.mat-tab-group.mat-primary .mat-ink-bar, .mat-tab-nav-bar.mat-primary .mat-ink-bar{
   background: rgba(149, 165, 166,0.3);
    height: 35px;
    border-radius: 100px;
    margin-bottom: 5px;
} 

请在此处查看实时样本.

https://stackblitz.com/edit/dmgrave-ng-so-anser-tabs-style?file=styles.css

希望这可以帮助.