如何将 mat-tab-group 标签向左对齐

Question

我在我的开发中使用角材料我想左对齐我的标签标签。

<mat-tab-group >
  <mat-tab label="Heading 1"> Content 1 </mat-tab>
  <mat-tab label="Heading 2"> Content 2 </mat-tab>
  <mat-tab label="Heading 3"> Content 3 </mat-tab>
</mat-tab-group>

我希望看到文本标题 1、标题 2 和标题 3左对齐。有没有办法实现这一目标？

https://material.angular.io/components/tabs/overview

Answer 1

从理论上讲，我不会过多地使用 Angular Material 样式，但是如果您确实需要将标签与左侧对齐，您可以执行以下操作（在您的组件样式表中）：

::ng-deep .mat-tab-label {
  padding: 0px !important; // adjust this to whatever padding you need
  justify-content: left !important;
}

这是一个显示它在行动中的堆栈闪电战。