6

I have some components which use the mat-tab elements in the HTML. When trying to style these elements in the CSS, I am only able to style them using ::ng-deep .mat-tab-label {} for example, and putting !important next to at least one of the style changes. I do not want to leave this in the application long-term, especially after reading this article.

Here is how it breaks down looking at the elements in developer tools:

<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">

What can I do in order to style these elements without using ::ng-deep and !important in the CSS?

j08691
  • 204,283
  • 31
  • 260
  • 272
tb517
  • 317
  • 4
  • 17

1 Answers1

9

What can I do in order to style these elements without using ::ng-deep and !important in the CSS?

In this case the solution that you can do is 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)

/* label style */
.mat-tab-label{
  background: green;
  color:white;
}
/* 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: red;
}
/* ink bar style */
.mat-tab-group.mat-primary .mat-ink-bar, .mat-tab-nav-bar.mat-primary .mat-ink-bar{
  background: yellow;
  height: 10px;
}

To see the live sample code please see this link - https://stackblitz.com/edit/dmgrave-ng-so-anser-tabs-style?file=styles.css

Hope this helps.

davecar21
  • 2,606
  • 21
  • 33
  • 1
    The link states that /deep/ is deprecated, along with ::ng-deep, which is the reason for my original question. I understand it works, but it is not recommended. – tb517 Feb 08 '18 at 16:50
  • @tb517 I see, please see my updated answer and hope it helps. – davecar21 Feb 09 '18 at 00:02