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

Question

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

第一个样式具有：

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

第二个样式：

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

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

我认为这是冲突，因为我正在使用':: ng-deep'，所以有没有一种方法可以在不使用':: ng-deep'的情况下更改.mat-tab-header的高度？

Answer 1

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

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

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

那应该可以解决您的问题。希望有帮助。