web-dev-qa-db-ja.com

Material Stepperヘッダーを削除する

マテリアルステッパーのヘッダーナビゲーションを削除します。どうすればよいですか?次のCSSを設定しようとしましたが、うまくいかないようです:

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

これがステッパーのstackblitzリンクです。 https://stackblitz.com/edit/angular-material2-beta-ybbnhe?file=app%2Fapp.component.html

enter image description here

18
RV.

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

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

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

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