javascript 使用步骤编号而不是复选标记作为Mui Stepper Completed StepIcon

pnwntuvh 于 2024-01-05 发布在 Java

关注(0)|答案(2)|浏览(74)

我在一个React项目中使用**email protected(https://stackoverflow.com/cdn-cgi/l/email-protection)中的Mui Stepper**。
我在Stackoverflow和Github上搜索，但我没有找到一种方法来显示步骤完成时的步骤编号，而不是显示Checkmark图标，这是Step组件的默认行为。
这是一张目前
步骤1完成：显示复选标记图标。

的数据
这是我们想要的行为：

的
我只是想取代复选标记图标与步骤的数量和保持不变的风格。
这是我实现的Stepper和我使用的样式

<Stepper
    style={{ background: 'transparent', width: '100%' }}
    activeStep={activeStep}
    alternativeLabel>
      {steps.map(x => (
         <Step key={x.label}>
            <StepButton 
               disabled={!onStepAction || x.order > activeStep}
               onClick={() => onStepAction(x.order)}
            >
               <StepLabel
                 classes={{
                     label: classes.label,
                     active: classes.activeLabel,
                     completed: classes.completedLabel,
                 }}
                 StepIconProps={{
                   classes: {
                     root: classes.icon,
                     active: classes.activeIcon,
                     completed: classes.completedIcon,
                   },
                 }}>
                 {x.label}
               </StepLabel>
             </StepButton>
         </Step>
      ))}
</Stepper>

个字符

JavaScript

来源：https://stackoverflow.com/questions/75062947/use-step-number-instead-of-checkmark-for-mui-stepper-completed-stepicon

2条答案

按热度按时间

enxuqcxy1#

这可以通过在使用StepLabel的地方添加StepIconComponent属性来实现，如下所示：

<StepLabel
  classes={{
      label: classes.label,
      active: classes.activeLabel,
      completed: classes.completedLabel,
  }}
  StepIconProps={{
    classes: {
      root: classes.icon,
      active: classes.activeIcon,
      completed: classes.completedIcon,
    },
  }}
  StepIconComponent={(props) => (
    <StepIcon
      {...props}
      icon={props.icon}
      active={props.active || props.completed}
      completed={false}
    />
  )}  
>
  {x.label}
</StepLabel>

字符串

的数据
这将强制StepIcon组件进入active状态，而不是completed状态，当步骤完成或激活时，呈现您想要的内容。要获得更明确的解决方案，请实现您自己的StepIcon组件。