为什么我不能直接设置角度材料步进元素的样式？

Question

这是我从步进器的官方角度文档中分叉出来的代码示例： https : //stackblitz.com/edit/angular-tth817

在我的 fork 中，我试图实现以下目标：

• 我想隐藏步进器标题。

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

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

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

你能告诉我吗：

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

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

• 我将如何摆脱标题？

Answer 1

从角度文档：

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

Answer 2

根据当前的 Angular Material 文档，除了上面提到的不推荐使用的方法之外，您还有另外两个选项：

• 将覆盖样式添加到全局样式表。 范围选择器，以便它只影响您需要它的特定元素。
• 在您的组件上关闭视图封装。 如果您这样做，请确保适当地确定样式的范围，否则您最终可能会偶然地针对应用程序中其他地方的其他组件。