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

Question

这是一个代码示例,我从 步进器的官方角度文档中分离出来:https://packblitz.com/edit/angular-tth817

在我的分支中,我正在努力实现以下几点:

• 我想隐藏步进头.

  • 我试过通过样式.mat-horizontal-stepper-header-container(实际上只是添加一个边框)尝试这样做.

• 我强迫最后一步的内容很高.在那里,您可以看到每个步骤上的按钮不再对齐.我想要做的是让步进器内容填充其父级(.container粗红色虚线),然后我可以使用弹性框来使按钮全部对齐在底部.

  • 我添加了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;
}