There are a few ways to reduce the width of the mat-tab-group.
1) Provide a custom class to your directive. On your component.html, we have added the .custom-tab-group
class to the mat tab directive.
<mat-tab-group class="custom-tab-group">
.
.
.
</mat-tab-group>
And on your css, define the class with the following properties
.custom-tab-group {
width:200px
}
Check out the working demo here .
2) Overwrite the .mat-tab-group
class on your main style.css. It is the one that is on the same directory level as your index.html, main.ts, package.json, etc. You might need to add the !important declaration. Here is a demo .
.mat-tab-group {
width: 200px!important;
}
3) On the component that uses the mat-tab, you will need to use the /deep/
shadow piercing to force the style. However, I would not recommend this method, as it will soon be deprecated . If you wish to use it, you will need to add the following css properties on your component.css file,
/deep/.mat-tab-group {
width: 200px!important; /* you might or might not need to use the !important declaration */
}
I have added a working demo over here .
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.