VUE3 无法修改 el-dialog 样式

本文主要是介绍VUE3 无法修改 el-dialog 样式，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

用下面这种方式修改 el-dialog 组件样式一点作用都没有，正常用这种方式修改 el 的el-button、tab等都是百试不爽的。最后找到解决办法和原因。在el-dialog外面套一层div

/deep/ .el-dialog {

  background: url(https://lanhu-oss.lanhuapp.com/7cbd761cd26f7b255086dd61bc2edc56) 100% 100% no-repeat!important;

  padding: 0;

}

原因：使用scoped的时候，在 html 的标签中会生成data-v-xxx的一个属性，样式穿透就是利用的这个属性生成的css；

而在 vue3 中，我们可以在template下不使用一个标签来包裹全部内容，而此时el-dialog在第一层的情况下就没有对应的data-v-xxx父级元素标签，所以样式穿透也就无效了.

我觉得说白了就是 template下第一层 这样施加样式的方式是无效的

这篇关于VUE3 无法修改 el-dialog 样式的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---