Material UI Stepper 使用自定义图标删除步骤编号。如何使用自定义图标添加数字或随机文本？

Question

<Stepper linear={false} activeStep={1}>
        <Step key={1}>
          <StepButton
            icon={<LensIcon color={grey300} children={<p>2</p>}/>}
            onClick={() => console.log('Clicked')}
          />
        </Step>
        <Step key={2}>
          <StepButton
            onClick={() => console.log('Clicked')}
          />
        </Step>
</Stepper>

嘿，如果我添加一个自定义图标，我会丢失步骤的数量，我希望能够添加颜色来指示步骤的状态。但如果我介绍我自己的图标，我会丢失数字。 请告知如何同时拥有两者？谢谢。

Answer 1

您可以将 LensIcon 和步数标签放在 div 内，并使用绝对定位将标签浮动在顶部。这是一个完成这项工作的小“StepIcon”组件：

const StepIcon = ({ label, color = colors.grey300, textColor = colors.lightBlack }) => (
    <div style={{ position: 'relative' }}>
      <LensIcon color={color} />
      <div style={{ color: textColor, position: 'absolute', top: 0, left: 0, width: '100%', height: '100%', textAlign: 'center', lineHeight: '24px' }}>{label}</div>
    </div>
);

用法（可以使用数字或字符串标签）：

...
<Step key={1}>
  <StepButton
    icon={<StepIcon label={1} />}
    onClick={() => console.log('Clicked') }
    />
</Step>
<Step key={3}>
  <StepButton
    icon={<StepIcon label={'A'} color={colors.green500} textColor={colors.white} />}
    onClick={() => console.log('Clicked') }
  />
</Step>

这是一个 jsFiddle 的实际操作：https://jsfiddle.net/67p1w0mk/2/