删除物料步进机头

Question

我想摆脱物料步进器上的标题导航。请提出我该怎么做？ 我尝试设置以下CSS，但似乎没有用：

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

这是步进器的stackblitz链接。 https://stackblitz.com/edit/angular-material2-beta-ybbnhe?file=app%2Fapp.component.html

Answer 1

您需要使用::ng-deep来组合阴影DOM和!important标志来组合材料自己的样式：

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

Answer 2

@Simon K答案正确。但这会影响您应用中的所有步进器。但是，如果要将其用于特定组件，请在:host之前使用::ng-deep。这样就不会影响应用程序中的其他步进器（如果有）。例如@Simon K'的答案-

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

Answer 3

以下代码用于隐藏垫子步进器标题。 :host ::ng-deep .mat-horizontal-stepper-header-container { display: none !important; }

Answer 4

您可以像这样在<mat-horizontal-stepper #stepper>中添加此CSS属性：

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