特定STEP角度填角的样式

Question

I'm using angular with primeng and the Steps component. I'm trying to give an specific style to the elements of the steps that are disabled.

In the primeng documentation I saw this property badgeStyleClass but is not working for me, because the style of the disabled elements are not apply:

This is my code:

this.otherItems = [
            {
                label: 'Personal',
                command: (event: any) => { }
            },
            {
                label: 'Seat',
                disabled: true,
                command: (event: any) => { }
            },
            {
                label: 'Payment',
                command: (event: any) => { }
            },
            {
                label: 'Confirmation',
                command: (event: any) => { }
            },
            {
                label: 'Order Made',
                disabled: true,
                badgeStyleClass: '#43752b',
                command: (event: any) => { }
            }
        ];

<h3>Clickable only in an specific steps</h3>
<div class="steps">
    <p-steps [model]="otherItems" [(activeIndex)]="actIndexClickableSpecificStep" [readonly]="false"></p-steps>
</div>

Thank you very much

Answer 1

You can do it by overriding the CSS of Primeng in you app. I have created an stackblitz for you. I have overridden the CSS of both, disabled and active blocks.

Here is the Stackbliz Url for your reference.

For overrding add your own class customestepper and overridden the CSS properties like below:

<p-steps class="customstepper" [model]="otherItems" [(activeIndex)]="actIndexClickableSpecificStep" [readonly]="false"></p-steps>

.customstepper .ui-steps .ui-steps-item.ui-state-disabled {
  background: #ddd;
}
.customstepper .ui-steps .ui-steps-item.ui-state-disabled .ui-menuitem-link {
  color: green;
}

In this way, it only effect this particular stepper only and if you want to apply the same to other steppers, then just add this CSS to other steppers as well.