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

シャドウDOMを回避するには::ng-deepを使用し、マテリアル独自のスタイルを回避するには!importantフラグを使用する必要があります。

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

Answer 2

@サイモンKの答えは正しいです。ただし、アプリのすべてのステッパーに影響します。ただし、特定のコンポーネントに使用する場合は、:Hostの前に::ng-deepを使用します。その後、アプリケーション内の他のステッパー（存在する場合）には影響しません。 @Simon K 'の例-

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