vue3中element-plus弹窗el-dialog的样式覆盖

最新推荐文章于 2025-04-02 14:47:16 发布

程先生哈

最新推荐文章于 2025-04-02 14:47:16 发布

阅读量2.8k

点赞数

文章标签： vue.js javascript

本文链接：https://blog.csdn.net/qq_35073135/article/details/131808691

版权

在将Vue2项目升级到Vue3并更新UI组件为element-plus后，遇到弹窗样式覆盖的问题。原本使用的/deep/语法不再支持，改为:deep()后仍无法生效。原因是弹窗被附加到了body下，导致样式路径改变。解决方案是通过添加特定class来针对性地覆盖element-plus的弹窗样式。

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

Vue2的老项目升级到了Vue3，然后UI组件也从element-ui升级到了element-plus。然后发现原来写的弹窗样式覆盖不成功了。首先是报错，/deep/ 语法不再支持，改成了 :deep（），然后发现样式还是不能覆盖成功；网上还有说需要一个根节点的，我发现我这个只有一个根节点。毕竟是老项目，vue2支持一个元素最为根节点。经过对元素的的分析看到了这样的问题；

由于为了方便，我把所有的弹窗都添加到了body（:append-to-body="true"）下面造成了弹窗的路径不再属于我们引入的位置。

找打了问题的关键，就能解决这个问题了。

<el-dialog class="watchElDialog" :append-to-body="true"></el-dialog>
<style lang="scss" scope>
  // 原来的样式
  /deep/ .el-dialog__footer { // 不起作用，并且报错
    text-align: center;
  }
  :deep(.el-dialog__footer){ // 不起作用，不报错
    text-align: center;
  }
</style>
<style lang="scss">
  // 单独覆盖element-plus的样式，添加一个class是为了不影响其他的样式
  .watchElDialog{
    .el-dialog__footer { // 开始覆盖原来的样式
      text-align: center;
    }
  }
</style>