reactjsmaterial-uiangular-material-stepper

How to change color in Stepper according to active and completed Step


Reactjs,MaterialUI

I am using reactjs and material ui in my project and i want to change color of StepConnector and Button inside Step if it is active or completed.i want to change color of StepConnector and Button if next step is Active.Below is the code i am using:


const Cart = () => {

  return (
    <Box
      sx={{
        minHeight: "800px",
        bgcolor: "#F6F9FC",
        width: "100%",
      }}
    >
      <Stepper
        nonLinear
        activeStep={activeStep}
        sx={{
          maxWidth: "60%",
          marginLeft: "10%",
          "& .MuiStepConnector-line": {
            borderColor: "#085E7D",
            borderTopWidth: "4px",
            minWidth: "30px",
          },
        }}
      >
        {steps.map((label, index) => (
          <Step key={label} sx={{ padding: "0px" }}>
            <Button
              variant="contained"
              onClick={handleStep(index)}
              completed={completed[index]}
              sx={{
                bgcolor: "#085E7D",
                borderRadius: "25px",
                "&:hover": {
                  backgroundColor: "#085E7D",
                  boxShadow: "none",
                  textShadow: "none",
                  margin: "0px",
                },
              }}
            >
              {label}
            </Button>
          </Step>
        ))}
      </Stepper>
    </Box>
  );
};

export default Cart;

Please help me in my code..


Solution

  • Your code snippet doesn't really give enough context to fully answer your question (not sure how the buttons are working?). However if I use this example from the MUI website, the following change to the Stepper results in the connector lines changing color when the next step is "active" and "complete".

    <Stepper
      activeStep={activeStep}
      sx={{
        "& .MuiStepConnector-line": {
          borderTopWidth: "4px",
        },
        "& .MuiStepConnector-root.Mui-active .MuiStepConnector-line": {
          borderColor: "red",
        },
        "& .MuiStepConnector-root.Mui-completed .MuiStepConnector-line": {
          borderColor: "green",
        },
     }}
    >