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

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.

Answer 2

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