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

Posted 2023-03-06

【中文标题】为啥我不能直接设置角材料步进元素的样式？

【英文标题】：Why can't I style angular material stepper elements directly?为什么我不能直接设置角材料步进元素的样式？

【发布时间】：2018-11-12 18:43:27

【问题描述】：

这是我从official angular documentation 为步进器分叉的代码示例：https://stackblitz.com/edit/angular-tth817

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

我想隐藏步进器标题。

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

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

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

你能告诉我吗：

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

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

如何摆脱标题？

【问题讨论】：

你将它添加到哪个 CSS 文件中？

@user184994 css 在我链接的代码示例中。

我可以看到，但是您将它添加到哪个 CSS 文件中？ *.component.css 文件之一？主要的styles.css文件？

@user184994 - 我编辑了stepper-overview-example.css

【参考方案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;

【讨论】：

太棒了。非常感谢。

好兄弟，你是怎么得到这个的。

我认为这已被正式弃用但仍在工作：/

@JoeyGough 是的，正如答案中提到的，它已被弃用。他们还没有宣布什么会取代它

【参考方案2】：

根据当前的 Angular Material documentation，除了上述不推荐使用的方法之外，您还有另外两个选择：

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