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>

實現截圖如下