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

Question

我正在使用 angular4 材质 什么时候使用下面的代码。它正确显示标签 但是当我切换选项卡点击任何选项卡时，选项卡之间的空格会发生变化 它变宽变窄，好像应用了一些 flex 样式的 space-between space-around 等。我没有添加任何额外的样式。 我在<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';