Proper way of reducing width of Angular Material's Tab labels?

user_1488564 0
Viewed 1862

The problem

Since /deep/, >>>, and ::ng-deep are deprecated, what could be the correct way of reducing the width of mat-tab-label which has a min width of 160px on desktop ?

  • Without overriding it in the main styles.css
  • I still want this custom styling of Material Tabs to be scoped to the parent component.

Material spec statement

Fixed tabs display all tabs on one screen, with each tab at a fixed width.
The width of each tab is determined by dividing the number of tabs by the screen width.
They don’t scroll to reveal more tabs; the visible tab set represents the only tabs available.

However that's not entirely true, in my case, the max-width of my parent component is set to 320px which roughly allow 106px for each mat-tab-label.

Edit 1

The Angular Material doc advocate to Add the overriding style to your global stylesheet. Scope the selectors so that it only affects the specific elements you need it to. which is precisely what I wan to avoid because of separation of concerns

angular-material angular typescript javascript
1 Answers

I ended up defining a custom styling of MatTab in the global styles.css :

your-component-selector {
  .mat-tab-label {
    min-width: 25px !important; // In addition to mat-strech-tabs allowing tabs to fill remaining space in parent container
    padding: 5px;
  }
}
  • your-component-selector will do the scoping, custom styling won't bleed in other components MatTab instances.
  • Don't forget to use mat-stretch-tabs on <mat-tab-group> in order to stretch Angular Material tabs to fit the parent width.
user_14885640
Related