Как выровнять метку группы вкладок по левому краю

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

Здесь - блик стека, показывающий его в действии.