7

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

在我的叉子中，我试图实现几件事：

  • 我想隐藏步进器标题。

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

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

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

你能告诉我吗：

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

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

  • 我将如何摆脱标题？

4

2 回答 2

18

从角度文档：

@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;
}
于 2018-06-03T05:23:48.727 回答
0

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

  • 将覆盖样式添加到全局样式表。范围选择器，使其仅影响您需要的特定元素。
  • 关闭组件上的视图封装。如果您这样做，请确保适当地确定您的样式范围，否则您可能最终会偶然地针对应用程序中其他地方的其他组件。
于 2020-09-15T03:58:01.200 回答