angular - 为什么我不能直接设置 Angular Material 步进器元素的样式？

Question

这是我从 official angular documentation 中 fork 出来的代码示例对于步进器: https://stackblitz.com/edit/angular-tth817

在我的 fork 中，我试图实现一些事情:

• 我想隐藏步进标题。

  • 我已经尝试通过样式化 .mat-h​​orizo​​ntal-stepper-header-container 来做到这一点(实际上只是给它添加一个边框)。

• 我把最后一步的内容强行拉高了。在那里，您可以看到每个步骤上的按钮不再对齐。我想要做的是让步进器内容填充其父级(.container，红色粗虚线)，然后我可以使用 flex box 使按钮全部对齐底部。

  • 我添加了 mat-stepper-horizo​​ntal、mat-stepper-horizo​​ntal 规则，但这些规则都不适用。

你能告诉我吗:

• 为什么这些规则根本没有出现？ (F12 开发人员工具，显示所有其他规则，但不显示特定于步进器的规则)。这里发生了什么？

• 通常 - 我应该使用什么哲学来设计步进器的样式？我能想到的最好的选择是在每个步骤中放置一个内容 div，并用 vh 和 vw 或其他东西调整它的大小。

• 我该如何去掉 header ？

Answer 1

来自 Angular 文档:

The styles specified in @Component metadata apply only within the template of that 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;
}