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

Question

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

<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;
}

Here is a stackblitz showing it in action.