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?

Answer 1

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

Answer 2

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.