Unable to apply custom styling to a 'step' component based on a condition.

[Ertuyo]

I map Step components like this:

<Stepper activeStep={activeStepIndex} styleConfig={stepConfig}>
      {steps.map((step, currentStepIndex) => (
         <Step></Step>
      ))}
</Stepper>

The step variable is a class containing some custom variables. Based on these variables, I want to apply custom styling to the Step component. But I can't do this by adding a className (I'm using css modules btw):

<Step className={{`${style.customStep}`}}></Step>

It then still uses the 'global' styling defined with styleConfig in the Stepper component.

FYI: I'm building a frontend with Next JS using typescript.

Thanks!

[Ertuyo]

To be more specific, I would like to modify the label text color.

[colehorvitz]

Did you figure this out? I think adding a style to the step component only applies to the button, and not the label. It seems very odd to me that activeLabelColor and inactiveLabelColor are not supported by this library. I assume it is a very common use case.