title: Styling mat-tab labels -Angular Material
body: <p>I'm trying to figure out how to change the color of the mat-tab labels. I've gone through every stack overflow post related to styling mat-tabs, but none of the solutions have changed the text color from white to black;
  Right now it looks like this. You can't even see the non-active tabs.
  <a href="https://i.stack.imgur.com/0clVe.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/0clVe.png" alt="enter image description here"></a></p>
  
  <p>How can I get the non-active links to show up as the color black?</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;div class="buttonRow"&gt;
    &lt;mat-tab-group id="linkLabel" mat-stretch-tabs class="example-stretched-tabs mat-elevation-z4" &gt;
      &lt;div class="tabContent" &gt;
        &lt;mat-tab id="tab1" label="Tab1" &gt;  Content 1 &lt;/mat-tab&gt;
        &lt;mat-tab id="tab2" label="Tab2"&gt; Content 2 &lt;/mat-tab&gt;
        &lt;mat-tab id="tab3" label="Tab3"&gt; Content 3 &lt;/mat-tab&gt;
      &lt;/div&gt;
      &lt;/mat-tab-group&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <p>css I'm using that's currently working</p>
  
  <pre class="lang-css prettyprint-override"><code>::ng-deep.mat-tab-label.mat-tab-label-active:not(.mat-tab-disabled),
  ::ng-deep.mat-tab-label.mat-tab-label-active.cdk-keyboard-focused:not(.mat-tab-disabled) {
    background-color: green;
  
    color: white;
    opacity: 1;
  }
  </code></pre>
  
  <p>End result of answer by Nathan</p>
  
  <p><a href="https://i.stack.imgur.com/1JhqV.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/1JhqV.png" alt="End result"></a></p>