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 ?
styles.css
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
.
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
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.mat-stretch-tabs
on <mat-tab-group>
in order to stretch Angular Material tabs to fit the parent width.