Not able to change tab's height, colour in Angular 6

Issue

I’m new Angular, CSS and Html.
I have used MatTabsModule(import { MatTabsModule } from ‘@angular/material/tabs’;) to create tabs but I’m able to adjust/change height, background etc. In short I’m not able to override default properties of MatTabsModule’s classes. Please help me.
Below is my CSS and Html code. I hope Typescript code is not needed.

HTML: –

<mat-card>
 <mat-card-content>
  <mat-tab-group class="tab-group" dynamicHeight>
      <mat-tab *ngFor="let obj of tags">
          <ng-template mat-tab-label>{{ obj.name }}</ng-template>
          <div class="tab-content">
              {{ obj.name }}
          </div>
      </mat-tab>
  </mat-tab-group>
</mat-card-content>

CSS: –

.tab-group {
  border: 1px solid #e8e8e8;
  margin-bottom: 30px;

  .unicorn-dark-theme & {
    border-color: #464646;
  }
}

.tab-content {
  padding: 16px;
}

mat-card{
  padding: 0px;
}

.mat-tab-label .mat-ripple {
  min-width: 0;
  height: 30px;
}

I'm not able to change height width of these tabs

I’m not able to change height width background colour of these tabs.. 🙁

Solution

You cannot access the styles of child components from your css-file as the ViewEncapsulation.Emulated prevents styles from leaking to the rest of the app (as it should, don’t change it).

If you use the ng-deep-selector like this: :host ::ng-deep mat-tab { ... } you can override default material styles that cannot be configured in any other way. I say that because making css leak from a component is considered a bad practice and if possible you should use @Input to pass on styles.

By the way, the :host is there so the styles leak only to this components children and not to the rest of the app

Answered By – Phil

Answer Checked By – David Marino (AngularFixing Volunteer)

Leave a Reply

Your email address will not be published.