移除 Material Stepper 标头答案

【问题标题】：Remove the Material Stepper header移除 Material Stepper 标头
【发布时间】：2019-01-13 22:55:49
【问题描述】：

我想摆脱材料步进器上的标题导航。请建议我该怎么做？我尝试设置以下 css 但似乎不起作用：

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

【问题讨论】：

【解决方案1】：

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

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

【讨论】：

但它仍然停留在 dom 中。这不是一个理想的解决方案。只是说，我不知道更好的。
将 !important 添加到 css 是不好的做法，因为重要的样式会在原始样式之后渲染一次。这会导致浏览器两次呈现 html 元素。我的建议是使用：css :host ::ng-deep .mat-horizontal-stepper-header-container { display: none; }

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

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

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

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

【讨论】：

【解决方案4】：

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

【讨论】：

【解决方案5】：

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

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

【讨论】：