Есть несколько способов уменьшить ширину группы вкладок mat.
1) Предоставить пользовательский класс для вашей директивы.В вашем component.html мы добавили класс .custom-tab-group к директиве вкладки mat.
<mat-tab-group class="custom-tab-group">
.
.
.
</mat-tab-group>
И на вашем CSS, определите класс со следующими свойствами
.custom-tab-group {
width:200px
}
Посмотрите рабочую демонстрацию здесь .
2) Перезапишите класс .mat-tab-group в вашем основном style.css.Это тот, который находится на том же уровне каталогов, что и ваши index.html, main.ts, package.json и т. Д. Вам может потребоваться добавить объявление! Important.Вот демо 1016 *.
.mat-tab-group {
width: 200px!important;
}
3) В компоненте, использующем вкладку мат, вам нужно будет использовать теневой пирсинг /deep/ для форсирования стиля.Однако я бы не рекомендовал этот метод, так как скоро он будет устарел .Если вы хотите использовать его, вам нужно добавить следующие свойства css в ваш файл component.css:
/deep/.mat-tab-group {
width: 200px!important; /* you might or might not need to use the !important declaration */
}
Я добавил рабочую демонстрацию поверх здесь .