Изменение расстояния между группами мат-вкладок при нажатии вкладок

Question

Я использую материал с angular4 Когда используется код ниже.он показывает вкладки должным образом, но когда я переключаю вкладки, нажимая на любую вкладку, промежутки между вкладками меняются, становится очень узким, как если бы применялся некоторый гибкий стиль между пробелом и т. д.я не добавил никаких дополнительных стилей.Я использую этот ниже компонент внутри <mat-sidenav-content>, если это что-то меняет.

<mat-tab-group [@.disabled]="true">
  <mat-tab label="Overview">
    <div>{{routeData.overview}}</div>
  </mat-tab>
  <mat-tab label="API">
    <div>{{routeData.api}}</div>
  </mat-tab>
  <mat-tab label="Examples">
    <div>{{routeData.examples}}</div>
  </mat-tab>
</mat-tab-group>

Answer 1

Я решил это сам.

Что я пропустил, так это то, что я не использовал какую-либо материальную тему.

Так что я просто добавил оператор импорта материальной темы в мои styles.css какупоминается ниже, и это сработало.

@import '~@angular/material/prebuilt-themes/deeppurple-amber.css';