Changing style of mui stepper icon

Question

I would like to change the color of the icon from

to this :

I know that it's not .Mui-active nor .Mui-completed , I tested .Mui-disabled but it doesn't work

here is the link to the sandbox :

https://codesandbox.io/s/horizontalnonlinearstepper-demo-material-ui-forked-u2yt0e?fontsize=14&hidenavigation=1&theme=dark

Any help ?

Answer 1

This one was a bit tricky, I had to add quite a few styles to achieve that.

First I've given every icon a round and visible border. The second style object ensures that the icon color is white and it excludes checked icons since we want them to look like usual.

  ".MuiSvgIcon-root": {
    borderRadius: "50%",
    border: "1px solid #1976d2"
  },
  ".MuiSvgIcon-root:not(.Mui-completed)": {
    color: "white"
  }

Next the text is being filled with the same color as the border and I made it more bold to be more readable.

  ".MuiStepIcon-text": {
    fill: "#1976d2",
    fontWeight: 500
  }

Last but not least the active icon should still remain the same so I've reduced the margin from -4px to -3px since the border adds 1px in every direction. The check icon should remain white so thats styled with fill: "white".

  ".MuiSvgIcon-root.Mui-active": {
    color: "#1976d2",
    padding: "3px",
    borderRadius: "50%",
    border: "1px solid #1976d2",
    marginY: "-3px"
  },
  ".Mui-active .MuiStepIcon-text": {
    fill: "white"
  }

And this is the result:

Live Demo