移除 Material Stepper 头部

Question

我想要在材料步进器上去掉头部导航。请建议如何做到这一点？ 我尝试设置以下CSS，但似乎没有起作用：

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

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

- RV.

Answer 1

您需要使用::ng-deep组合来绕过影子DOM，并使用!important标志来绕过材料自己的样式：

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

- Simon K

---

但它仍然停留在DOM中。这不是一个理想的解决方案。只是说，我不知道更好的方法。 - King Julien

在 CSS 中添加 !important 是一种不好的做法，因为重要的样式会在原始样式之后渲染。这会导致浏览器将 HTML 元素呈现两次。我的建议是使用以下代码：:host ::ng-deep .mat-horizontal-stepper-header-container { display: none; } - Todor Todorov

Answer 2

@Simon K的答案是正确的。但这会影响你应用程序中的所有步进器。但如果你想仅针对特定组件使用它，请在::ng-deep之前使用:host。那么它将不会影响应用程序中的其他步进器（如果有）。例如，@Simon K答案的示例：

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

- Md Rafee

Answer 3

通过扩展CSS并在元素上使用附加属性，可以隐藏仅特定用例的元素。

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

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

- baHI

Answer 4

以下代码可用于隐藏Mat Stepper标题栏。 :host ::ng-deep .mat-horizontal-stepper-header-container { display: none !important; }

- MrPopai

---

此答案已经被提供过了，是重复的。 - Timothy Alexis Vass

Answer 5

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

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

- dev-assassin

---

这将同时移除步进器的内容。我只想要移除顶部导航。 - RV.