如何将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;
}

  

Here是一个堆栈炸弹，显示了它的实际作用。