Материал 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/