删除Material Stepper标题

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;
}