0

I have done my mat-tab customization as follows

.mat-tab-label {
     font-weight:300; 
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
    color:white !important;
    font-size:18px;
    opacity: 1 !important
}

.mat-tab-link {
    color:white !important;
}

.mat-ink-bar {
    background-color: white !important
}

.mat-tab-label-active {
    font-weight:300; 
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
    color:white !important;
    font-size:18px;
    opacity: 1 !important
 }

the tab looks as

<mat-tab-group>
  <mat-tab label="Sales">
    <div fxLayout="row" fxFlex="100%"> </div>
  </mat-tab>
  <mat-tab label="Service">
    <h1>Some more tab content</h1>
    <p>...</p>
  </mat-tab>
</mat-tab-group>

I have two problems:

  1. the ink-bar color is not changing
  2. I have two different tab groups. I want to style them differently. So with above solution, it basically changes all the tab components globally. How do I convert them to specific CSS classes? I did try like .my-label and using it as class="my-label" but that does not work.
Daniel
  • 3,541
  • 3
  • 33
  • 46
Vik
  • 8,721
  • 27
  • 83
  • 168

1 Answers1

0

A solution is to use ::ng-deep to override default css properties.

So your CSS becomes:

::ng-deep .mat-tab-label {
     font-weight:300; 
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
    color:white !important;
    font-size:18px;
    opacity: 1 !important
}

:ng-deep .mat-tab-link {
    color:white !important;
}

::ng-deep .mat-ink-bar {
    background-color: white !important
}

ng:deep .mat-tab-label-active {
    font-weight:300; 
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
    color:white !important;
    font-size:18px;
    opacity: 1 !important
 }

Regarding the second point of your question, simply wrap these CSS properties in different classes and use them where needed.

bugs
  • 14,631
  • 5
  • 48
  • 52
  • what do u mean by wrap? i usually do .my-label {copy page same from .mat-label} and use class="my-label" is that same or doing it differently ? – Vik Apr 20 '18 at 16:10
  • Yes i meant exactly that – bugs Apr 20 '18 at 20:49
  • this is hard for tab cases as there are no direct elements like ink-bar in tab component that i can add my own class – Vik Apr 21 '18 at 04:31