Steps: Cannot style active step in unstyled mode

[girardinsamuel]

Describe the bug

Hi,

I am using Steps component in unstyled mode and I am trying to define styles. I managed to style the component, but not to style the active step (like putting a different background color).

Here is the code for the theme :

const Tailwind = {
    steps: {
            // ... other styles
            step: ({ props, state }) => ({
                className: clsx(
                    'flex items-center justify-center',
                    'text-zinc-950 dark:text-white border border-zinc-950/10 dark:border-white/10 w-[2rem] h-[2rem] leading-2rem text-sm z-10 rounded-full',
                    {
                        'bg-gray-500': props.activeIndex !== ?,
// here I don't know what I need to write to check if active, I don't have access to context.index ?
                        'bg-green-500': props.activeIndex == ?,
                    }
                ),
            }),
}

and the basic component usage :

import { useState } from 'react'
import { Steps } from 'primereact/steps'

export default function MyComponent() {
    const [activeIndex, setActiveIndex] = useState(0)
    const items = [
        {
            label: 'Personal Info'
        },
        {
            label: 'Reservation'
        },
        {
            label: 'Review'
        }
    ];

    return (
            <Steps model={items} activeIndex={activeIndex} />
    )
}
        

It seems that in steps theme we have access to props and state but I cannot manage to get a conditional expression to check if step is active or not...

In the demo, the active style exists but I don't know how to create it. What is the solution 🙏 ? Thank you in advance,

Reproducer

No response

PrimeReact version

10.7.0

React version

18.x

Language

TypeScript

Build / Runtime

Vite

Browser(s)

No response

Steps to reproduce the behavior

No response

Expected behavior

No response