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

[mj12albert]

@Andre-MR-Pereira-NBI Not the most elegant solution, but :nth-child could do it?

e.g.

.MuiMobileStepper-dots:nth-child(1) {
  background-color: blue;
}

.MuiMobileStepper-dots:nth-child(2) {
  background-color: red;
}

.MuiMobileStepper-dots:nth-child(3) {
  background-color: green;
}

[Andre-MR-Pereira-NBI]

@Andre-MR-Pereira-NBI Not the most elegant solution, but :nth-child could do it?

e.g.

.MuiMobileStepper-dots:nth-child(1) {
background-color: blue;
}

.MuiMobileStepper-dots:nth-child(2) {
background-color: red;
}

.MuiMobileStepper-dots:nth-child(3) {
background-color: green;
}

I did not think of this, but it can definitely work if I create css variables to bind to the background color and dynamically change them in React! However, as you said, it is not elegant. In my case, I know I will have at most X steps in it, so I can just create upfront the maximum number of variables that will be used. But creating and updating X distinct variables just to change background colors is not ideal.

While we are at it, I think we should also be able to bind handler events to them. A simple use case that I have seen others request as well (#13294) is to have a OnClick event that triggers a function that sets the current step.

I understand that the mobile stepper is a lightweight component with limited functionality that can be easily mounted in a page, but taking away such simple and integral parts of data/user handling is too restrictive when trying to customize and tweak it for specific use cases.