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 t

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