cssangular-materialmat-stepper

Change unselected mat-step color Angular?

I use the following css for the selected mat-step:

::ng-deep .mat-step-header .mat-step-icon-selected {
    background-color: #a94442; 
 }

It works fine but I need to change the blue ones:

enter image description here

Tried with:

::ng-deep .mat-step-header .mat-step-icon {
    background-color: #a94442; 
 }

But that also changes the 4,5 and 6 steps, and I only need 1 and 2 to be changed.

Any idea on how to solve this? Thanks!

Solution

  • You shouldn't use 'ng-deep' because it's depricated. Set your styles in your global css! To solve your problem change the background-color like below in you 'styles.css' file.

    .mat-step-header .mat-step-icon-state-edit {
    background-color: #a94442;
}