angular - 单击选项卡时 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

我自己解决了。

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

所以我只是在我的styles.css中添加了一个材料主题的导入声明，如下所述，它起作用了。

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