Удалите заголовок шага материала

Хочу избавиться от заголовка навигации по материалу степпера. Подскажите пожалуйста как мне это сделать? Я попытался установить следующий CSS, но, похоже, не работает:

.mat-horizontal-stepper-header-container{display: none}

Вот ссылка на стэкблиц степпера. https://stackblitz.com/edit/angular-material2-beta-ybbnhe?file=app%2Fapp.component.html

enter image description here

Ответы

Ответ 1

Вам нужно использовать комбинацию ::ng-deep чтобы обойти тени DOM и !important флаг, чтобы обойти собственные стили оформления:

::ng-deep .mat-horizontal-stepper-header-container {
  display: none !important;
}

Ответ 2

@Симон К ответ правильный. Но это повлияет на все степперы в вашем приложении. Но если вы хотите использовать его для вашего конкретного компонента, используйте :host перед ::ng-deep. Тогда это не повлияет на другие степперы (если они есть) в вашем приложении. Например, @Simon K 'answer-

:host ::ng-deep .mat-horizontal-stepper-header-container {
  display: none !important;
}

Ответ 3

вы можете добавить это свойство css в <mat-horizontal-stepper #stepper> следующим образом:

<mat-horizontal-stepper #stepper style="display: none;">
....
</mat-horizontal-stepper>