vue3的element-plus的el-dialog的样式修改无效问题

问题描述

想要修改element-plus的对话框el-dialog中的样式，发现在页面style的scoped属性下，使用:deep深入选择器进行修改是无效的。（vue2下深度选择器是有效的）

//无效
:deep(.el-dialog){
  background-color: transparent;
}

解决

方法一

在el-dialog外嵌套一层div

 <div class="my-dialog">
    <el-dialog v-model="dialogVisibles"  v-if="dialogVisibles">
    </el-dialog>
</div>

<style scoped lang=less>
:deep(.my-dialog){
  background-color: transparent;
}
// 使用深度是选择器也生效了
:deep(.el-dialog){
  background-color: transparent;
}
<style >

方法二

不在外面前套div, style 不使用 scoped

.el-dialog {
  background-color: transparent;
}
// 或则 el-dialog 加上class
.my-dialog {
  background-color: transparent;
}

原理

网友：

在组件中中 把el-dialog放在一个div中，然后:deep(你要修改的元素class) ， 还有一个重要的前提是dialog中有一个属性append-to-body ，把这个属性设成false 或者不写才可以用深度选择器修改样式，这个属性就是把dialog插入到body中，不然就算包裹在div中依然是取不到样式

这个问题并不是elmentUi和element-plus引起的，而是vue2和vue3的区别。vue2中要求单个组件文件中的template中只能有一个元素（如：div），而vue3是可以有多个的，vue3中不生效，是因为直接把el-dialog写在了template根目录中，其实只要在template中添加一个div，所有东西都放到div中就可以了。本质原因是：页面中el-dialog的渲染位置不同，添加div就会在当前组件位置渲染，如果没有div，就会在中渲染。这个答案大家接受吗？

参考