删除 Material 步进器 header

Question

我想去掉 material 步进器上的 header 导航。请建议我该怎么做？我尝试设置以下 css 但似乎没有用：

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

Answer 1

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

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

Answer 2

您需要结合使用 ::ng-deep 来绕过阴影 DOM 和 !important 标志来绕过 Materials 自己的样式：

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

Answer 3

@Simon K 回答正确。但它会影响您应用中的所有步进器。但是如果你想将它用于你的特定组件，请在 ::ng-deep 之前使用 :host。然后它不会影响您应用程序中的其他步进器（如果有的话）。例如@Simon K' answer-

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

Answer 4

下面的代码用于隐藏 mat stepper header。 :host ::ng-deep .mat-horizontal-stepper-header-container { display: none !important; }

Answer 5

扩展 CSS 和 在元素上使用附加属性 以仅隐藏它的特定用例。

mat-stepper[hide-header] .mat-horizontal-stepper-header-container {
  display:none;
}

<mat-stepper hide-header orientation="horizontal" #stepper>

Remove the Material Stepper header