Unique color for each step in MobileStepper

[Andre-MR-Pereira-NBI]

Summary

It should be possible to give each unique dot of the mobile stepper a specific color or css className. At the moment, it is only possible to give all dots of the MobileStepper the same className.

Examples

Let's say I have an array with status from a service => ['info','error','success','error']
And I have a mobile stepper with 4 dots.

I would like to give each of the distinct dots a color corresponding to the statuses. I.e, I would like to have a MobileStepper component where the colors of the dot icons would be like this:

blue - red - green - red

Here is as far as I got:
<MobileStepper variant="dots" steps={data.length} position="static" activeStep={activeStep} classes={{ dot: data[0]['status'] }} ... />

It would be great if instead of dot: data[0]['status'], I could target dot: data[${INDEX_OF_THE_DOT}]['status']. I have created the css styles to change the background color of the dots according to the class each dot has, but I see no way to do this binding.

Motivation

I would like to give each of the distinct dots a color corresponding to the statuses. I.e, I would like to have a MobileStepper component where the colors of the dot icons would be like this:

blue - red - green - red

Search keywords: Unique color for each step in MobileStepper