ng-deep用于自定义mat-tab-header导致css冲突

Question

我有两个页面，我试图在两个页面之间导航，每个页面都有"mat-tab“。

第一个的风格有：

::ng-deep.mat-tab-header {
  height: 12vh;
}

第二个的风格：

::ng-deep.mat-tab-header {
  height: 8vh;
}

从第二页导航到第一页后，高度仍然为8vh

我认为冲突是因为我使用了'::ng-deep‘，所以有没有一种方法可以改变.mat-tab-header的高度而不使用'::ng-deep’呢？

Answer 1

我不确定它是否可以按您需要的方式进行自定义，但您可以使用带有:host选择器的::ng-deep来实现。这样，您就可以将绑定的样式绑定到组件。例如：

:host ::ng-deep .mat-tab-header {
  height: 12vh;
}

:host ::ng-deep .mat-tab-header {
  height: 8vh;
}

这应该可以解决你的问题。希望这能有所帮助。