首页 文章

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

提问于
浏览 次
3

这是一个代码示例，我从步骤的official angular documentation分叉： https://stackblitz.com/edit/angular-tth817

在我的分支中，我正在努力实现以下几点：

  • 我想隐藏步进 Headers .

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

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

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

你能告诉我吗：

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

  • 一般来说 - 我应该用什么哲学来设计踏步机的样式？我能想到的最好的选择是在每个步骤中放入一个内容div，并用vh和vw或其他东西来调整它 .

  • 如何摆脱 Headers ？

css angular css3 flexbox angular-material-5

1 回答

  • 10

    从角度文档：

    @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;
}
    回复于

相关问题