减少 Angular Material 标签标签宽度的正确方法？

Question

问题

由于/deep/、>>>和已被弃用，在桌面上减少最小宽度为160px::ng-deep的宽度的正确方法是什么？mat-tab-label

• 没有在主要覆盖它styles.css

• 我仍然希望将 Material Tabs 的这种自定义样式限定在父组件范围内。

材料规格声明

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，这大致允许每个106pxmat-tab-label。

编辑 1

由于关注点分离， Angular Material 文档提倡的Add the overriding style to your global stylesheet. Scope the selectors so that it only affects the specific elements you need it to.正是我想要避免的

Answer 1

我最终MatTab在全局中定义了一个自定义样式styles.css：your-component-selector {&nbsp; .mat-tab-label {&nbsp; &nbsp; min-width: 25px !important; // In addition to mat-strech-tabs allowing tabs to fill remaining space in parent container&nbsp; &nbsp; padding: 5px;&nbsp; }}your-component-selector将进行范围界定，自定义样式不会在其他组件MatTab实例中流血。不要忘记使用mat-stretch-tabson<mat-tab-group>来拉伸 Angular Material 选项卡以适应父宽度。