【react】修改antd的步骤条样式

antd中的Steps步骤条组件能够满足一般样式需求，但是对于有些项目对步骤条样式有要求的话就需要对antd中的代码做一下修改
项目中用到的步骤条的样式如下：

image.png

具体的代码如下：

<Step 
title='2019-04-28'
description={'首次上报'} 
icon={<img width={15} src={require(`../assets/img/lastcircle.png`)} alt=""/>}
//这个icon中写你的img的相对路径
/>

注意⚠️：如果使用antd的Steps自定义组件的自定义样式前提是一定不要在包裹step的Steps父组件中写progressDot属性，这个属性会覆盖自定义的样式都变成小圆点样式

正确写法 <Steps id="step" direction="vertical" current={1}>
错误写法<Steps id="step" direction="vertical" current={1} progressDot={true}>
如果数据比较多涉及到循环不同数据安放不同图标的话，我项目中的代码可以作为参考
如：我项目中的思路是对于后台给我返回不同的status状态值会对应不同的图标，所以处理逻辑如下
代码如下：

//这块放在render中
 let StepItem = steps.map( (item,index) => {
      switch(item.status){
        case -1:
          item.icon = require(`../assets/img/Tohandle.png`);
        break;
        case 1:
          item.icon = require(`../assets/img/handling.png`);
        break;
        case 0:
          item.icon = require(`../assets/img/handled.png`);
        break;
        default:
          item.icon = require(`../assets/img/remark.png`);
      }
      if(item.status ){ //等于0的情况返回的是false
        return <Step 
          icon={<img width={30} src={item.icon} alt=""/>}
          description ={'......'} 
        key={Math.random()
        }/> 
      }
    })

//这块放在return中
return(
    <Steps id="step" direction="vertical" current={this.state.currentStep}>
        {StepItem}  //这块就是从上面取到的变量
   </Steps>
)

这样就能循环出来不同的样式了，有什么问题可以相互讨论哦～