使用自定义图标的材质UI步进器删除步骤编号。如何使用自定义图标添加数字或随机文本？

Question

＆＃13;

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

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

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/