Хочу избавиться от заголовка навигации по материалу степпера. Подскажите пожалуйста как мне это сделать? Я попытался установить следующий CSS, но, похоже, не работает:
.mat-horizontal-stepper-header-container{display: none}
Вот ссылка на стэкблиц степпера. https://stackblitz.com/edit/angular-material2-beta-ybbnhe?file=app%2Fapp.component.html
Вам нужно использовать комбинацию ::ng-deep чтобы обойти тени DOM и !important флаг, чтобы обойти собственные стили оформления:
::ng-deep .mat-horizontal-stepper-header-container {
display: none !important;
}
@Симон К ответ правильный. Но это повлияет на все степперы в вашем приложении. Но если вы хотите использовать его для вашего конкретного компонента, используйте :host перед ::ng-deep. Тогда это не повлияет на другие степперы (если они есть) в вашем приложении. Например, @Simon K 'answer-
:host ::ng-deep .mat-horizontal-stepper-header-container {
display: none !important;
}
вы можете добавить это свойство css в <mat-horizontal-stepper #stepper> следующим образом:
<mat-horizontal-stepper #stepper style="display: none;">
....
</mat-horizontal-stepper>