How to use custom color for step label string in Material UI

Question

I wanna use Stepper in a black background. Accordingly, need to change the step label string from the primary color (grey) to a light one (white). I applied a custom style to StepLabel as below:

const ColorlibStepLabel = styled(StepLabel)(() => ({
  [`&.${stepLabelClasses.active}`]: {
    [`& .${stepLabelClasses.label}`]: {
      color: '#fff',
    },
  },
  [`&.${stepLabelClasses.completed}`]: {
    [`& .${stepLabelClasses.label}`]: {
      color: '#fff',
    },
  },
  [`& .${stepLabelClasses.label}`]: {
    color: 'rgb(255, 255, 255, 0.3)',
  },
}));

After this, I was able to get white color for disabled state but not for completed and active state.

I'd like to know the correct way how to change the color for completed and active step label string.

https://codesandbox.io/s/headless-field-nbbcy

Answer 1

const ColorlibStepLabel = styled(StepLabel)(() => ({
  [`& .${stepLabelClasses.label}`]: {
    [`&.${stepLabelClasses.completed}`]: {
      color: 'rgba(255, 255, 255, 1)',
    },
    [`&.${stepLabelClasses.active}`]: {
      color: 'rgba(255, 255, 255, 1)',
    },
    color: 'rgba(255, 255, 255, 0.3)',
  },
}));

This works! ? @amanzrx4 at GitHub published the solution.