修改elemet-ui组件的内部样式

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

iamjwe

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

阅读量4.1k

点赞数 3

CC 4.0 BY-SA版权

分类专栏：样式与布局文章标签： scoped element-ui vue

来自清心的博客

本文链接：https://blog.youkuaiyun.com/jw2268136570/article/details/88666716

样式与布局专栏收录该内容

3 篇文章

订阅专栏

当使用element-ui的el-dialog组件，有修改组件内样式（如el-dialog__body样式）的需求时，博主总结了三种思路。一是添加类名，但可能因组件渲染结果失败；二是组件内不使用scoped，但会使样式作用到全局；三是使用scoped并结合深度选择器，此为推荐方法。

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

实例：修改el-dialog的el-dialog__body的样式

如果我们使用了element-ui的el-dialog组件，面临修改组件内的样式（例如修改el-dialog__body的样式）的需求，这是博主总结的三种思路。

第一种思路：添加类名（与组件渲染结果有关，可能失败（如下例））

我们尝试在el-dialog组件上添加样式类来达到层叠样式的目的。如下例的dialog-select类名

<el-dialog title="信息查看" :visible.sync="selectFormVisible" :close-on-click-modal="false"   class="dialog-select">
            ....
            </el-dialog>

结果：失败，我们审查元素发现
el-dialog组件渲染结果

这里我们发现element-ui的el-dialog组件渲染了三层，而我们添加的dialog-select样式出现在了最外层div，无法层叠el-dialog__body的样式。所以说，我们无法通过为el-dialog添加样式类来层叠其内层的div的样式。

第二种思路：组件内不使用scoped（不推荐）

如果组件内取消使用scoped来进行局部样式保护，那么直接层叠扩展内层的div样式即可。但要注意你在该组件定义的所有样式将会作用到全局，会留有隐患，尤其是常用的类名和复用组件内的类名。

第三种思路：依然使用scoped，使用深度选择器（推荐）

参考vue文档中vue loader部分

<style lang="scss" scoped>
  .dialog-wrapper {
    /deep/ .el-dialog__body {
      padding: 10px;
      height: 560px;
      overflow-y: scroll;
    }
   </style>

注意：这里记博主遇到的一次坑，不管是/deep/还是>>>的使用都是原样输出，即最终生成的style标签依然保留/deep/和>>>在类名当中，导致scoped穿透失败。在我更新项目依赖的时候，这个问题便被解决。
如果你想对scoped理解的更深一些，请参考博主的另一篇博客，写了博主对scoped的理解。