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

Question

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

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

我在SCSS中尝试了这个，但它不起作用。

$months = ItemIn::groupBy(DB::raw('MONTH(created_at)'))->selectRaw('DATE_FORMAT(created_at, "%M") as month')->get();

任何人都可以请求帮助，

Answer 1

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

请看这个链接（Cannot style mat-tab without ::ng-deep and !important）并提升它是否对您有所帮助，我认为这与您想要实现的目标类似。

回答你的问题

您需要使用选择器特异性，然后将您的样式放在根样式/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

希望这有帮助。

Answer 2

以下各行对我有用。建议使用:: ng-deep。它将应用于子组件：

::ng-deep .mat-tab-group.mat-primary .mat-ink-bar {
    background-color: rgb(39, 184, 176) !important;
}

Answer 3

使用:: ng-deep

::ng-deep .mat-tab-group.mat-primary .mat-ink-bar, .mat-tab-nav-bar.mat-primary .mat-ink-bar {
    background-color: #00d440;
}