如何更改活动选项卡的墨水栏颜色？ [英] How to change the inkbar color of the active tab?

问题描述

是否可以更改活动选项卡的墨水栏颜色？

默认情况下，墨水栏为蓝色。有关示例，请参阅here。

我在SCSS中尝试过，但不起作用。

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

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

任何人都可以帮忙，

推荐答案

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

请查看此链接(Cannot style mat-tab without ::ng-deep and !important)，如果它对您有帮助，请向上投票，我认为这与您想要实现的目标相似。

回答您的问题

您需要使用选择器专用性，然后将您的样式放入根style/src/style es.css(注意：不要将其放入组件style Urls您的样式将不起作用)

设置墨水栏样式

.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

希望这能有所帮助。

这篇关于如何更改活动选项卡的墨水栏颜色？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！