减少 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 {

  .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-tabson<mat-tab-group>来拉伸 Angular Material 选项卡以适应父宽度。