cssreactjsmaterial-uistepper

changing style of mui stepper

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

I need to change the icon step from enter image description here

to this : enter image description here

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

I added , '.Mui-active': { color: '#1C6FC9', }, here is the link to the sandbox https://codesandbox.io/s/horizontalnonlinearstepper-demo-material-ui-forked-9pqxxk

Any help ?

Solution

  • The idea is to this solution is to add a padding to the active icon, then drawing a round border around that.

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

    marginY: "-4px" is there to balance the padding and border without breaking the spacing. marginY is equal to marginTop and marginBottom, thats why -4 + -4 = -8 which equals to the added difference in padding plus border on both sides: 3 + 3 + 1 + 1 = 8.

    This is what the result looks like:

    enter image description here

    Live Demo

    Edit HorizontalNonLinearStepper demo — Material UI (forked)