如何将材料ui步进器中的数字更改为字母，如a，b，c，d

Posted 2023-02-22

【中文标题】如何将材料ui步进器中的数字更改为字母，如a，b，c，d

【英文标题】：How to change numbers in material ui stepper to alphabet like a,b,c,d

【发布时间】：2021-10-31 04:29:21

【问题描述】：

我想把materialui stepper中的数字改成字母

enter image description here

enter image description here

现在我无法调用 getSteps 函数

【参考方案1】：

您需要将StepIconProps 传递给您的StepLabel。在您的StepIconProps 中，在icon 键中传递您想要的图标/标签

import Button from "@material-ui/core/Button";
import Paper from "@material-ui/core/Paper";
import Step from "@material-ui/core/Step";
import StepContent from "@material-ui/core/StepContent";
import StepLabel from "@material-ui/core/StepLabel";
import Stepper from "@material-ui/core/Stepper";
import  makeStyles  from "@material-ui/core/styles";
import Typography from "@material-ui/core/Typography";
import React from "react";

const useStyles = makeStyles((theme) => (
  root: 
    width: "100%"
  ,
  button: 
    marginTop: theme.spacing(1),
    marginRight: theme.spacing(1)
  ,
  actionsContainer: 
    marginBottom: theme.spacing(2)
  ,
  resetContainer: 
    padding: theme.spacing(3)
  
));

function getSteps() 
  return [
    <div className="header__text">Insurance company </div>,
    <div className="header__text">TO BE FILLED BY INSURED/PATIENT</div>,
    <div className="header__text">
      TO BE FILLED BY TREATING DOCTOR / HOSPITAL
    </div>,
    <div className="header__text">DETAILS OF PATIENT ADMITTED</div>
  ];


export default function VerticalStepper() 
  const classes = useStyles();
  const [activeStep, setActiveStep] = React.useState(0);
  const headers = getSteps();
  const steps = ["A", "B", "C", "D"];

  const handleNext = () => 
    setActiveStep((prevActiveStep) => prevActiveStep + 1);
  ;

  const handleBack = () => 
    setActiveStep((prevActiveStep) => prevActiveStep - 1);
  ;

  const handleReset = () => 
    setActiveStep(0);
  ;

  function getStepContent(step) 
    switch (step) 
      case 0:
        return `For each ad campaign that you create, you can control how much
                you're willing to spend on clicks and conversions, which networks
                and geographical locations you want your ads to show on, and more.`;
      case 1:
        return "An ad group contains one or more ads which target a shared set of keywords.";
      case 2:
        return `Try out different ad text to see what brings in the most customers,
                and learn how to enhance your ads using features like ad extensions.
                If you run into any problems with your ads, find out how to tell if
                they're running and how to resolve approval issues.`;
      default:
        return "Unknown step";
    
  

  return (
    <div className=classes.root>
      <Stepper activeStep=activeStep orientation="vertical">
        steps.map((label, index) => (
          <Step key=label>
            <StepLabel StepIconProps= icon: label >
              headers[index]
            </StepLabel>
            <StepContent>
              <Typography>getStepContent(index)</Typography>
              <div className=classes.actionsContainer>
                <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>
            </StepContent>
          </Step>
        ))
      </Stepper>
      activeStep === steps.length && (
        <Paper square elevation=0 className=classes.resetContainer>
          <Typography>All steps completed - you&apos;re finished</Typography>
          <Button onClick=handleReset className=classes.button>
            Reset
          </Button>
        </Paper>
      )
    </div>
  );

【讨论】：

我想改成字母顺序a,b,c

使用该顺序创建一个数组并传递优点。假设数组是['a', 'b', 'c']，传递像array[index]这样的props

是的，但它显示在我希望将它们放置在标签内的标签之前

不看代码就不可能知道为什么会这样。使用代码更新您的问题

不客气。不要忘记将其标记为答案并点赞