减少Angular Material的Tab标签宽度的正确方法？ 编辑1

问题描述

问题

由于不推荐使用/deep/，>>>和::ng-deep，减小最小宽度为的mat-tab-label的宽度的正确方法是什么桌面上为160px ？

• 在主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.

但是，对于我而言，这并不完全正确，我将父组件的max-width设置为 320px ，这对于每个{{1 }}。

编辑1

Angular Material doc倡导mat-tab-label，正是由于关注点分离而我想避免的事情

解决方法

我最终在全局MatTab中定义了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进行范围界定，自定义样式不会在其他组件MatTab实例中流血。
• 别忘了在mat-stretch-tabs上使用<mat-tab-group>来拉伸Angular Material选项卡以适合父级宽度。