MatStepper Doesn't Allow Styling

[marc-wilson]

Is this a regression?

• Yes, this behavior used to work in the previous version

The previous version in which this bug was not present was

No response

Description

I am trying to apply basic styling to the MatStepper. However, the styles seem to get completely stripped out. If I use the deprecated ::ng-deep, things work just fine. But, ::ng-deep is being (or is) deprecated. What is the proper way to do this?

Example:
Trying to hide the .mat-horizontal-stepper-header-container and change the background of .mat-horizontal-content-container to red.

.mat-horizontal-stepper-header-container {
  display: none !important;
}

.mat-horizontal-content-container {
  background: red !important;
}

But this works just fine:

::ng-deep .mat-horizontal-stepper-header-container {
  display: none !important;
}

::ng-deep .mat-horizontal-content-container {
  background: red !important;
}

Repro:
https://stackblitz.com/edit/angular-ylfbfk?file=src/app/stepper-overview-example.css

Expected result:

Actual result:

Reproduction

https://stackblitz.com/edit/angular-ylfbfk?file=src/app/stepper-overview-example.css

Expected Behavior

Basic styling should apply to components without needing to use the deprecated ::ng-deep

Actual Behavior

No styles apply to the component without specifying ::ng-deep

Environment

• Angular: 14.2.1
• CDK/Material: 14.2.1
• Browser(s): Chrome
• Operating System (e.g. Windows, macOS, Ubuntu): Mac

[crisbeto]

It's because by default the styles of all components are encapsulated which means that they can only target elements within the template. You can disable it by setting encapsulation: ViewEnapsulation.None in the @Component.

[marc-wilson]

ViewEncaplsulation.None introduces more problems that I do not wish to deal with. I understand the encapsulation of component styles, but my question is about the recommended alternative to the deprecated ::ng-deep if one exists. If that answer is ViewEncapsulation.None, it will be unfortunate.

[crisbeto]

There is no alternative, this is the whole point of view encapsulation.

[marc-wilson]

So it's either ViewEncapsulation.None or rebuilding the component to my standards using CDK? It seems a little much for wanting to hide a header.

I would expect some option similar to :host, but for :child or something.

[crisbeto]

That's just how view encapsulation works: it encapsulates all of the styles.

[marc-wilson]

Reiterating "it's just how it works" is not helpful.

[zarend]

Hello @mswilson4040 ,

We hope that the MatStepper meets your needs. For support requests, I believe you will get more help from a different channel, as we can only give limited support in this issue tracker. Consider asking for support on:

• StackOverflow
• Gitter
• Google Groups

If you believe this is something that the MatStepper could do to better meet your needs, consider filing a feature request or creating a github discussion.

-Zach

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}