使用自定義圖標的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/