如何根据活动和完成的步骤在步进器中更改颜色

Question

Reactjs,MaterialUI

我在我的项目中使用了 reactjs 和 material ui，如果 StepConnector 和 Button 处于活动状态，我想更改它的颜色，或者 completed.i 想更改StepConnector 和 Button 如果下一步是 Active.Below 是我正在使用的代码：


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;

请在我的代码中帮助我..

Answer 1

您的代码片段并没有真正提供足够的上下文来完全回答您的问题（不确定按钮是如何工作的？）。但是，如果我使用 MUI 网站上的这个 example，对步进器的以下更改会导致连接线在下一步“活动”和“完成”时改变颜色。

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

如何根据活动和完成的步骤在步进器中更改颜色

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

reactjs

material-ui

angular-material-stepper