iview的step组件自定义样式

场景：当我们需要在step组件自己设置样式，该怎么做？样式穿透可以改变组件原有的样式，这是改变所有这个dom下的样式，当有step是循环生成的，每个step我要根据特定的字段生成不同样式呢？那可以在每个step组件中判断，那当要改变的样式是step绑定的title或者content呢？这是绑定的字符串呀，直接字符串放标签加样式，貌似解析不了。那就要用到强大的模板template加slot插槽功能。

代码：

 <Steps :current="currentLog" direction="vertical" size="small">
                <div v-for="(item, index) in processLogInfo" :key="index" style="height:80px">
                    <Step :title="item.nodeTitle">
                        <template slot="content">
                            <span>{{item.nickname}}</span>
                            <span v-if="item.flowState===null" style="color:#9ea7b4;font-weight:600;font-size:14px"> 待处理</span>
                            <span v-if="item.flowState==='1'" style="color:#3399ff;font-weight:600;font-size:14px"> 发起</span>
                            <span v-if="item.flowState==='2'" style="color:#00cc66;font-weight:600;font-size:14px"> 通过</span>
                            <span v-if="item.flowState==='3'" style="color:#ff3300;font-weight:600;font-size:14px"> 驳回</span>
                            <span>
                                {{stepContent(item)}}
                            </span>
                        </template>
                        <template slot="title">
                            <span style="color：red">你好啊</span>
                        </template>
                    </Step>
                </div>
            </Steps>

计算属性：

 computed: {
        // 处理审批日志内容
        stepContent() {
            return function(item) {
                let remark = ''
                let time = ''
                if (item.remark === null) {
                    remark = '无'
                } else {
                    remark = item.remark
                }
                if (item.createDate === null) {
                    time = '无'
                } else {
                    time = item.createDate
                }
                return `流程；意见：${remark}；时间：${time}`
            }
        }
    },

貌似iview要自定义组件样式，都可以通过slot插槽来解决 

效果：