【react】修改antd的步驟條樣式

antd中的Steps步驟條組件能夠滿足一般樣式需求，但是對於有些項目對步驟條樣式有要求的話就需要對antd中的代碼做一下修改
項目中用到的步驟條的樣式如下：

具體的代碼如下：

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

這樣就能循環出來不同的樣式了，有什麼問題可以相互討論哦～