Question

以下是我从步骤器official angular documentation分叉的代码示例： https://stackblitz.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;
}

Answer 2

对于每个当前的Angular Material documentation，除了上面提到的不推荐使用的方法之外，您还有两个选择：

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

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

2 个答案: