Unable to customize CSS with mat-tab or mat-ink-bar (Angular)

Question

I've tried a number of ways to call the mat-tab and mat-ink-bar in my CSS. I have something like this HTML, for example:

 </div>
    <mat-card>
      <mat-tab-group>
        <mat-tab label="Login">
          <app-login></app-login>
        </mat-tab>
      </mat-tab-group>
    </mat-card>
</div>

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.

In the Style section of developer tools after clicking on that particular element, I can see that it is under .mat-tab-header, and I modified some of the values successfully. I cannot get it to work when I call that in the CSS file.

The element breaks down like this (hopefully this helps):

<mat-card class="mat-card">
  <mat-tab-group class="mat-tab-group mat-primary">
    <mat-tab-header class="mat-tab-header">
      <div class="mat-tab-header-pagination mat-tab-header-pagination-before mat-elevation-z4 mat-ripple mat-tab-header-pagination-disabled>
      <div class="mat-tab-label-container">
        <div class="mat-tab-list">
          <div class="mat-tab-labels">
            <div class="mat-tab-label mat-ripple mat-tab-label-active ng-star-inserted">
            <mat-ink-bar class="mat-ink-bar">

How can I correctly call these elements in the CSS so I can modify their styles?

Answer 1

Try :host ::ng-deep .mat-tab-header { } And if still no change, add !important.