Angular material 在“材质设计”中使选项卡标签拉伸到全宽，以实现角度调整

我想让制表符伸展到其父div的全宽。有人知道怎么做吗

<div class="tabs-header">
    <mat-tab-group>
        <mat-tab label="Signup">Content 1</mat-tab>
        <mat-tab label="Login">Content 2</mat-tab>
    </mat-tab-group>
</div>

内容1
内容2

现在看来是这样的：

---

我做了一些研究，看起来以前有一种方法可以做到这一点，比如

，但这似乎不是一个功能，也没有关于它的文档。

所以经过大量研究，我找到了答案：标签可以使用css类

mat tab label

作为目标，由于它们是覆盖组件，因此无法在组件本身中设置样式，并且样式需要位于全局样式表中，如下所述： 还有其他解决方案。我实际使用的css：

.mat-tab-label {
    width: 50%;
}

---

此外，您还可以使用

mat拉伸选项卡

property

<mat-tab-group mat-stretch-tabs>
     <mat-tab label="Signup">Content 1</mat-tab>
     <mat-tab label="Login">Content 2</mat-tab>
</mat-tab-group>

内容1
内容2

它只适用于绝对像素大小的我

.mat-tab-label {
  width: 300px;
}

而不是百分数

.mat-tab-label {
  width: 50%;
}

---

使用Angular/Material 7.1.0+

可以在组件级别或全局级别应用的简单解决方案是添加以下CSS：

.mat-tab-labels {
     justify-content: space-around;
     display: flex;
}

或者，如果您使用的是顺风：

.mat-tab-labels {
     @apply justify-around 
     @apply flex;
}

---

请注意，在旧的AngularJS材质中，它具有“始终”、“从不”等属性，而这些属性已不再具有。如果您对调用的css感兴趣，那么它非常简单——同时也是一个问题：这是可行的，但是您是如何找到这个属性的？@wooldridgetm您在API中找不到这个属性，但它在@Wandrille中，您是对的，但我不明白为什么它不在API docksYou实际上不需要使用全局css。相反，您可以使用

定义标签（文档中的示例），然后使用组件css设置

标签的样式（无全局样式或
：：ng deep
）。我需要一个最小宽度
mat-tab组标签{min-width:160px；}
您需要先将mat-tab导航条设置为宽度：100%。