title: Unable to customize CSS with mat-tab or mat-ink-bar (Angular)
body: <p>I've tried a number of ways to call the <code>mat-tab</code> and <code>mat-ink-bar</code> in my CSS. I have something like this HTML, for example:</p>
  
  <pre><code> &lt;/div&gt;
      &lt;mat-card&gt;
        &lt;mat-tab-group&gt;
          &lt;mat-tab label="Login"&gt;
            &lt;app-login&gt;&lt;/app-login&gt;
          &lt;/mat-tab&gt;
        &lt;/mat-tab-group&gt;
      &lt;/mat-card&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I am working in that component's CSS to customize the style. I can go into the developer tools and modify the CSS of the element directly in the browser, but I am having difficulty calling those elements in the CSS file.</p>
  
  <p>In the Style section of developer tools after clicking on that particular element, I can see that it is under <code>.mat-tab-header</code>, and I modified some of the values successfully. I cannot get it to work when I call that in the CSS file.</p>
  
  <p>The element breaks down like this (hopefully this helps):</p>
  
  <pre><code>&lt;mat-card class="mat-card"&gt;
    &lt;mat-tab-group class="mat-tab-group mat-primary"&gt;
      &lt;mat-tab-header class="mat-tab-header"&gt;
        &lt;div class="mat-tab-header-pagination mat-tab-header-pagination-before mat-elevation-z4 mat-ripple mat-tab-header-pagination-disabled&gt;
        &lt;div class="mat-tab-label-container"&gt;
          &lt;div class="mat-tab-list"&gt;
            &lt;div class="mat-tab-labels"&gt;
              &lt;div class="mat-tab-label mat-ripple mat-tab-label-active ng-star-inserted"&gt;
              &lt;mat-ink-bar class="mat-ink-bar"&gt;
  </code></pre>
  
  <p>How can I correctly call these elements in the CSS so I can modify their styles?</p>