angular - 使用 Angular Material 打开 sidenav 时居中选项卡下的墨栏未正确对齐

Question

我想在我的页面顶部添加一些选项卡，并且我想将它们居中。但是，当我打开 sidenav 时，标签下方的墨栏未对齐。单击任一选项卡将重置墨栏，并重新正确定位。如何使墨条正确对齐？

我在我的组件上使用 ViewEncapsulation.None，并且我已经覆盖了 mat-tab-list 的 css，如下所示:

.mat-tab-list{
  display: flex;
  justify-content: center;
}

也许还有另一种(正确的)方法可以使选项卡居中，这样我就可以避免这种行为？

我做了一个 stackblitz 来重现这个问题， https://stackblitz.com/edit/angular-thrvh6 (问题发生在桌面大小的窗口，而不是移动大小的窗口)

Answer 1

似乎将 sidenav 的 mode 属性设置为 push 可以解决问题。但是，它会改变组件的显示方式，因为当 sidenav 打开时，右侧的内容会部分变灰；这是否是可接受的行为取决于您。