add intermediate step in mui stepper and overriding style

Question

I would like to change the following code to meet my needs

1. I need to change the design from this :

to this :

I can not change the style and also add an intermediate step

here is the lin to the sandbox

https://codesandbox.io/s/horizontalnonlinearstepper-demo-material-ui-forked-9pqxxk

Thank you in advance

Answer 1

To make the stepper icons closer to each other simply change the width of your <Stepper /> component. I chose 400px, change this value to fit your needs.

sx={{
  width: "400px",
  ...
}}

I replaced the content > with a wider arrow ❯ and adjusted the top alignment.

".MuiStepConnector-root": {
  top: 2
},
".MuiStepConnector-root span::before": {
  display: "flex",
  justifyContent: "center",
  content: '"❯"'
}

This is what the result looks like:

Live Demo