删除Material Stepper标题

RV.*_*RV. 12 css angular-material angular-material2 angular

我想摆脱材料步进器上的标题导航.请建议我该怎么办?我尝试设置以下css但似乎没有工作:

.mat-horizontal-stepper-header-container{display: none}
Run Code Online (Sandbox Code Playgroud)

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

在此输入图像描述

Sim*_*n K 20

你需要结合使用::ng-deep阴影DOM和!important旗帜来绕过材料自己的样式:

::ng-deep .mat-horizontal-stepper-header-container {
  display: none !important;
}
Run Code Online (Sandbox Code Playgroud)

  • 在 css 中添加 !important 是不好的做法,因为重要的样式是在原始样式之后渲染的。这会导致浏览器渲染 html 元素两次。我的建议是使用: ```css :host ::ng-deep .mat-h​​orizo​​ntal-stepper-header-container { display: none; } ``` (7认同)

Md.*_*fee 6

@Simon K 答案是正确的。但它会影响您应用程序中的所有步进器。但是如果你想将它用于你的特定组件,请:host::ng-deep. 然后它不会影响您应用程序中的其他步进器(如果有)。例如@Simon K'答案-

:host ::ng-deep .mat-horizontal-stepper-header-container {
  display: none !important;
}
Run Code Online (Sandbox Code Playgroud)