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

本文介绍了为什么我不能直接设置角材料步进器元素的样式?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

这是我从官方角度文档中获得的代码示例 : https://stackblitz.com/edit/angular-tth817

Here is a code example I've forked from the official angular documentation for stepper: https://stackblitz.com/edit/angular-tth817

在我的叉子上，我正在尝试实现以下几点:

In my fork, I'm trying to achieve a couple of things:

我想隐藏步进头.

I want to hide the stepper header.

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

I've tried doing this by styling .mat-horizontal-stepper-header-container (actually just adding a border to it).

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

I forced the content of the last step to be tall. There, you can see that the buttons on each step no longer align. What I would like to do is have the stepper content fill its parent (.container, the thick red dashed line), and then I can use flex box to get the buttons to all align at bottom.

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

I added mat-stepper-horizontal, mat-stepper-horizontal rules, and these don't apply either.

你能告诉我:

为什么这些规则根本没有出现? (F12开发人员工具显示所有其他规则，但不显示步进特定的规则).这里发生了什么?

Why aren't these rules appearing at all? (F12 developer tools, shows all the other rules, but not that ones that are stepper specific). What's going on here?

通常-我应该使用哪种哲学来设计步进器?我能想到的最好的替代方法是在每个步骤中放入一个内容div，并用vh和vw或其他内容调整大小.

Generally - what philosophy should I use for styling the stepper? The best alternative I can think of, is to put a content div inside each step, and size it with vh and vw or something.

我如何摆脱标题?

推荐答案

来自有角度的文档:

( https://angular.io/guide/component-styles#style-scope )

换句话说，在此文件中添加样式不会影响子组件.

In other words, adding styling in this file will not affect child components.

请注意，Angular提供了特殊的CSS选择器，可用于选择子组件.这些在技术上已弃用，但目前没有提及将取代它们的地方.

Please note that Angular provide special CSS selectors you can use to select children components. These are technically deprecated, but there is currently no mention of what will take their place.

::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;
}

这篇关于为什么我不能直接设置角材料步进器元素的样式?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！

Stepper