element UI前端样式不生效问题

element UI前端样式不生效问题

背景

element UI中步骤条组件，想修改其步骤条描述内容的默认样式，在浏览器调试的时候是ok的，但是在代码中添加却不生效

解决关键

-style scoped-中去掉scoped
注意：去掉scoped后，自定义样式会影响全局，建议添加当前作用域的组件id或者类名（id或者class），如：此处的 class=“order-detail-step”

前端代码

<el-steps :space="250" :active="step.active" v-for="step in steps">
  <el-step class="order-detail-step" :title="item.title" :description="(item.no || '') + '\r\n' + (item.qty || '') + (item.qty ? '\r\n' : '') + (item.date || '')" 
    v-for="item in step.stepPos" :key="item.index">
  </el-step>
</el-steps>

<style scoped>
/* style加scoped则是组件默认样式  */
</style>
<style>
/* 自定义样式不能加scoped */
.order-detail-step .el-step__description.is-finish {
  white-space: pre-line;
}
</style>

实现截图如下