Search code examples
cssreactjsmaterial-uistepper

add intermediate step in mui stepper and overriding style

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

  1. I need to change the design from this :

enter image description here

to this :

enter image description here

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

Solution

  • 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:

    enter image description here

    Live Demo

    Edit HorizontalNonLinearStepper demo — Material UI (forked)