VUE3 无法修改 el-dialog 样式

1. 解决方案 - 当前页面新增不带scope的style标签

   <style lang="scss">
   // pdf-preview 是dialog新增的class类名
   .pdf-preview {
     .el-dialog__body {
       padding: 0;
     }
   }
   </style>
   

2. 场景复现

   使用:deep() 添加样式无效

   <template>
     <el-dialog
       v-model="dialogVisible"
       width="70%"
       top="5vh"
       append-to-body
       class="pdf-preview"
     >
       xxx
    </el-dialog>
   <template>
   <style lang="scss" scoped>
   .pdf-preview {
     :deep() {
         padding: 0;
     }
    }
   </style>
   

3. 问题原因

   3.1. 网上搜索说dialog需要一个div包裹

   <template>
     <div>
         <el-dialog
           v-model="dialogVisible"
           width="70%"
           top="5vh"
           append-to-body
           class="pdf-preview"
         >
           xxx
        </el-dialog>
    </div>
   <template>
   <style lang="scss" scoped>
   .pdf-preview {
     :deep() {
         padding: 0;
     }
    }
   </style>
   

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

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

   但是对于我们的案例还是不生效

   3.2. 使用全局样式去覆盖 - 生效

   <style lang="scss">
   // pdf-preview 是dialog新增的class类名
   .pdf-preview {
     .el-dialog__body {
       padding: 0;
     }
   }
   </style>
   

   原因：因为使用append-to-body属性，导致即使按照穿透的规则找了，但是Dialog元素脱离了当前文档结构，跑到Body标签下面去了，所以还是无效。