单击选项卡上的 mat-tab-group 间距更改

Question

我正在使用带有 angular4 的材料何时使用下面的代码。它正确显示选项卡，但是当我切换选项卡单击任何选项卡时，选项卡之间的空间会变宽变窄，就好像应用了一些 flex 样式空间之间的空间等。我没有添加额外的样式。<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

我自己解决了。

我错过的是，我没有使用任何材料主题。

所以我只是在我的 style.css 中添加了一个材料主题的导入语句，如下所述并且它起作用了。

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