Why can't I style angular material stepper elements directly?

Question

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.
- I've tried doing this by styling .mat-horizontal-stepper-header-container (actually just adding a border to it).
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.
- I added mat-stepper-horizontal, mat-stepper-horizontal rules, and these don't apply either.

Can you tell me:

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?
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.
How would I get rid of the header?

I can see that, but which CSS file did you add it to? One of the *.component.css files? The main styles.css file? — user184994, Jun 03 '18 at 05:16

user184994 · Accepted Answer · 2018-06-03T05:37:14.030

18

From the angular docs:

The styles specified in @Component metadata apply only within the template of that component.

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

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

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

edited Jun 03 '18 at 05:37

answered Jun 03 '18 at 05:23

user184994

17,791
1
46
52

i think that this is officially deprecated but still working :/ – Joey Gough Oct 25 '18 at 13:14
@JoeyGough yep, as mentioned in the answer, it is deprecated. They've yet to announce what will replace it – user184994 Oct 25 '18 at 13:21

score 0 · Answer 2 · answered Sep 15 '20 at 03:58

Per current Angular Material documentation, you have two other options besides the deprecated method mentioned above:

Add the overriding style to your global style sheet. Scope the selectors so that it only affects the specific elements you need it to.
Turn view encapsulation off on your component. If you do this, be sure to scope your styles appropriately, or else you may end up incidentally targeting other components elsewhere in your application.

Why can't I style angular material stepper elements directly?

2 Answers2

Linked