angular - 如何更改事件选项卡的墨水栏颜色？

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

默认情况下，墨水栏为蓝色。有关示例，请参见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)，如果有帮助，请进行投票，我认为这与您想要实现的目标相似。

回答你的问题

您需要使用选择器特异性，然后将样式放在根样式/src/styles.css中(注意:不要将样式放在组件styleUrl中，您的样式将不起作用)

造型墨水吧

.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

希望这可以帮助。