如何覆盖 StepLabel 默认标签？

Question

我正在尝试覆盖 StepLabel 以删除每个 StepLabel 中的值（“1”、“2”和“3”）。

Image of the current status bar.

如图所示，步进器在每个节点/圆内都有数字。

我已经根据 Material-UI 文档创建了一个 CustomStepLabel，但它没有按预期工作或缺少某些东西。

StepLabel 文档链接：https://material-ui.com/api/step-label/

我尝试在 CustomStepLabel 中设置 labelContainer : {fontSize: 0, and display: 'none'} 但它没有对文本进行任何更改，我仍然可以看到圆圈中的数字。

    import React from "react";
    import {
      makeStyles,
      Theme,
      createStyles,
      withStyles
    } from "@material-ui/core/styles";
    import Stepper from "@material-ui/core/Stepper";
    import Step from "@material-ui/core/Step";
    import StepLabel from "@material-ui/core/StepLabel";
    import StepConnector from "@material-ui/core/StepConnector";
    import Button from "@material-ui/core/Button";
    import Typography from "@material-ui/core/Typography";
    import COLORS from "theme/colors";
    
    const QontoConnector = withStyles({
      alternativeLabel: {
        top: 10,
        left: "calc(-50% + 16px)",
        right: "calc(50% + 16px)"
      },
      active: {
        "& $line": {
          borderColor: COLORS.black,
        }
      },
      completed: {
        "& $line": {
          borderColor: COLORS.black,
        }
      },
      line: {
        borderColor: "#eaeaf0",
        borderTopWidth: 3,
        borderRadius: 1
      }
    })(StepConnector);
    
    const CustomStepLabel = withStyles({
      labelContainer: {
        fontSize: 0,
        display: 'none'
      },
      MuiStepIcon: {
        text: {
          fontSize: 0,
          display: 'none'
        }
      }
    })(StepLabel);
    
    const useStyles = makeStyles((theme: Theme) =>
      createStyles({
        root: {
          width: "100%",
        },
        button: {
          marginRight: theme.spacing(1)
        },
        instructions: {
          marginTop: theme.spacing(1),
          marginBottom: theme.spacing(1)
        },
        label: {
          fontSize: 0
        }
      })
    );
    
    function getSteps() {
      return ["Order Placed", "In Progress", "Shipped"];
    }
    
    function getStepContent(step: number) {
      switch (step) {
        case 0:
          return "Order Placed";
        case 1:
          return "In Progress";
        case 2:
          return "Shipped";
        default:
          return "Unknown step";
      }
    }
    
    const ProgressBar2 = () => {
      const classes = useStyles();
      const [activeStep, setActiveStep] = React.useState(1);
      const steps = getSteps();
    
      const handleNext = () => {
        setActiveStep((prevActiveStep) => prevActiveStep + 1);
      };
    
      const handleBack = () => {
        setActiveStep((prevActiveStep) => prevActiveStep - 1);
      };
    
      const handleReset = () => {
        setActiveStep(0);
      };
    
      return (
        <div className={classes.root}>
          <Stepper alternativeLabel activeStep={activeStep} connector={<QontoConnector />}>
            {steps.map((label) => (
              <Step key={label}>
                <CustomStepLabel>{label}</CustomStepLabel>
              </Step>
            ))}
          </Stepper>
          <div>
            {activeStep === steps.length ? (
              <div>
                <Typography className={classes.instructions}>
                  All steps completed - you&apos;re finished
                </Typography>
                <Button onClick={handleReset} className={classes.button}>
                  Reset
                </Button>
              </div>
            ) : (
              <div>
                <Typography className={classes.instructions}>
                  {getStepContent(activeStep)}
                </Typography>
                <div>
                  <Button
                    disabled={activeStep === 0}
                    onClick={handleBack}
                    className={classes.button}
                  >
                    Back
                  </Button>
                  <Button
                    variant="contained"
                    color="primary"
                    onClick={handleNext}
                    className={classes.button}
                  >
                    {activeStep === steps.length - 1 ? "Finish" : "Next"}
                  </Button>
                </div>
              </div>
            )}
          </div>
        </div>
      );
    }
    
    export default ProgressBar2

如果您有任何建议，请告诉我，我将不胜感激。

Answer 1

通过覆盖 StepIconProps 的根类，我能够删除 StepLabel 值 (1,2,3...)。 我做了这样的事情：

<Stepper alternativeLabel activeStep={activeStep} connector={<QontoConnector />}>
   {steps.map((label) => (
      <Step key={label}>
         <StepLabel
            StepIconProps={{
              classes: {
                root: classes.stepIconRoot,
              },
         }}>
           {label}
         </StepLabel>
      </Step>
   ))}
</Stepper>

然后像这样导出你的组件：

const styles = () => ({
  stepIconRoot: {
    display: 'none',
  },
});
    
export default withStyles(styles)(ProgressBar2);

Answer 2

我能够按照以下步骤自定义 StepLabel：

1. 创建了一个组件“CustomStepIcon”来替换当前的默认节点。
2. 为组件“useCustomStepIconStyles”添加了样式。
3. 在 StepLabel 道具中传入“CustomStepIcon”组件。

Click here to see an image of custom StepLabel without the inner text as desired.

const useCustomStepIconStyles = makeStyles({
  root: {
    color: '#eaeaf0',
    display: 'flex',
    height: 20,
    alignItems: 'center',
  },
  active: {
    color: COLORS.black,
  },
  circle: {
    width: 21,
    height: 21,
    borderRadius: '50%',
    backgroundColor: 'currentColor',
  },
  completed: {
    color: COLORS.black,
    width: 25,
    height: 25,
  },
})

const CustomStepIcon = (props: StepIconProps) => {
  const classes = useCustomStepIconStyles();
  const { active, completed } = props;

  return (
    <div
      className={clsx(classes.root, {
        [classes.active]: active,
      })}
    >
      {completed ? <CheckCircleIcon className={classes.completed} /> : <div className={classes.circle} />}
    </div>
  );
}

      <Stepper alternativeLabel activeStep={activeStep} connector={<QontoConnector />}>
        {steps.map((label) => (
          <Step key={label}>
            <StepLabel
              StepIconComponent={CustomStepIcon}
            >
              {label}
            </StepLabel>
          </Step>
        ))}
      </Stepper>