How to change the inkbar color of the active tab?

Question

Is it possible to change the inkbar color of the active tab?

By default the ink bar is blue. See here for an example.

I tried this in SCSS, but it doesn't work.

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

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

Anyone can please help,

Answer 1

This could be similar to what you want to achieve

Please see this link ( Cannot style mat-tab without ::ng-deep and !important ) and upvote if it helps you, I think this is similar to what you want to achieve.

To answer your question

You need to use Selector specificity and then put your style in the root style /src/styles.css (NOTE: that don't put it in the components styleUrls your style will not work)

to style the ink bar

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

Change ink-bar from underline to elliptical covering the item

You can try this code to make it elliptical to cover the item.

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

Please see the live sample here.

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

Hope this helps.