网上快速学做网站,网站做支付系统,跟公司产品做网站,wordpress 搜索栏目问题描述
想要修改element-plus的对话框el-dialog中的样式#xff0c;发现在页面style的scoped属性下#xff0c;使用:deep深入选择器进行修改是无效的。#xff08;vue2下深度选择器是有效的#xff09;
//无效
:deep(.el-dialog){background-color: transparent;
}解决…问题描述
想要修改element-plus的对话框el-dialog中的样式发现在页面style的scoped属性下使用:deep深入选择器进行修改是无效的。vue2下深度选择器是有效的
//无效
:deep(.el-dialog){background-color: transparent;
}解决
方法一
在el-dialog外嵌套一层div div classmy-dialogel-dialog v-modeldialogVisibles v-ifdialogVisibles/el-dialog
/divstyle scoped langless
: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就会在中渲染。这个答案大家接受吗 参考
