为什么点不开网站/中国纪检监察报
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的情况返回的是falsereturn <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>
)
这样就能循环出来不同的样式了，有什么问题可以相互讨论哦～