ng-deep для настройки заголовка mat-tab-header, вызывающего конфликт css

Question

У меня есть две страницы, и я пытаюсь перемещаться между двумя страницами, каждая из которых имеет "вкладку"

стиль первой имеет:

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

стильвторой:

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

после перехода со второй страницы на первую снова снова высоту 8vh

, и я думаю, что конфликт, потому что я использую ':: ng-deep'так есть ли способ изменить высоту .mat-tab-header без использования' :: ng-deep '?

Answer 1

Я не уверен, настраивается ли он так, как вам нужно, но вы можете добиться этого с помощью ::ng-deep вместе с селектором :host.Таким образом вы будете привязывать стили к вашему компоненту .Например:

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

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

Это должно решить вашу проблему.Надеюсь, это поможет.