为什么我不能直接设置 angular material 步进元素的样式？

Question

这是我从 official angular documentation for stepper: https://stackblitz.com/edit/angular-tth817

中分叉出来的代码示例

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

• 我想隐藏步进器header。

  • 我试过通过样式 .mat-horizontal-stepper-header-container 来做到这一点（实际上只是给它添加一个边框）。

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

  • 我添加了 mat-stepper-horizontal, mat-stepper-horizontal 条规则，这些规则也不适用。

你能告诉我吗：

• 为什么这些规则根本没有出现？ （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 select 或者您可以用于 select 子组件。这些在技术上已被弃用，但目前没有提及将取代它们的位置。

::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;
}

Answer 2

根据当前 Angular Material documentation，除了上述已弃用的方法外，您还有另外两个选择：

• 将覆盖样式添加到您的全局样式 sheet。确定选择器的范围，使其仅影响您需要它的特定元素。
• 在您的组件上关闭视图封装。如果您这样做，请务必适当地确定您的样式的范围，否则您最终可能会意外地以应用程序中其他地方的其他组件为目标。