element UI前端样式不生效问题

最新推荐文章于 2025-07-10 13:24:12 发布

原创最新推荐文章于 2025-07-10 13:24:12 发布 · 1.7w 阅读

7 ·

CC 4.0 BY-SA版权

前端专栏收录该内容

13 篇文章

订阅专栏

本文讲解了在使用elementUI框架时遇到的样式不生效问题，通过去除 scoped 属性并添加自定义类名来成功覆盖默认样式，适用于步骤条组件描述内容的样式修改。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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>