web-dev-qa-db-ja.com

angularマテリアルステッパー要素を直接スタイル設定できないのはなぜですか？

これが私がフォークしたコード例です 公式angularドキュメント ステッパー用：https：// stackblitz.com/edit/angular-tth817

私のフォークでは、いくつかのことを達成しようとしています。

  • ステッパーヘッダーを非表示にします。

    • .mat-horizontal-stepper-header-containerをスタイリングしてこれを試してみました（実際には境界線を追加するだけです）。

  • 最後のステップの内容を無理やり高くしました。ここで、各ステップのボタンが整列しなくなっていることがわかります。私がやりたいのは、ステッパーのコンテンツをその親（.container、太い赤い破線）に塗りつぶしてから、フレックスボックスを使用してボタンをすべて下部に揃えることです。

    • mat-stepper-horizontal, mat-stepper-horizontalルールを追加しましたが、これらも適用されません。

教えて頂けますか：

  • これらのルールがまったく表示されないのはなぜですか？ （F12開発ツールは、他のすべてのルールを表示しますが、ステッパー固有のルールは表示しません）。何が起きてる？

  • 一般的に-ステッパーのスタイリングにはどのような哲学を使用する必要がありますか？私が考えることができる最良の代替案は、各ステップ内にコンテンツdivを配置し、vhやvwなどでサイズを変更することです。

  • ヘッダーを削除するにはどうすればよいですか？

angularcssflexboxangular-material-5
4
dwjohnston

angularドキュメントから：

@Componentメタデータで指定されたスタイルは、そのコンポーネントのテンプレート内でのみ適用されます。

（ https://angular.io/guide/component-styles#style-scope ）

つまり、このファイルにスタイルを追加しても、子コンポーネントには影響しません。

Angularは、子コンポーネントを選択するために使用できる特別なCSSセレクターを提供することに注意してください。これらは技術的に非推奨ですが、現在、何が行われるかについては言及されていません。

::ng-deep .mat-horizontal-stepper-header-container {
  border: solid 1px red; 
}

::ng-deep mat-stepper-horizontal, mat-stepper-horizontal {
  border: dashed 1px blue; 
  padding: 1em;
}
16
user184994