reactjs - 使用自定义图标的 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 中，并使用绝对定位将标签 float 在顶部。这是一个完成这项工作的小“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/