Vue3对话框样式修改不了

两个条件

①全局定义了对话框的样式

②在局部定义对话框的样式

问题出发点

在项目开发的过程中，为了规范代码和统一组件的样式，通常会在全局定义整套的样式，使得项目在展现给客户的时候有统一规范高效易理解的效果

修改过程

在引入的时候（直接复制elementplus内的dialog），发现引入的对话框内容中带有两条横杠，后来发现是之前在全局中定义了对话框的样式

所以出现如下的效果：

然后通过F12查找样式，发现出现了如下的属性

由前面几篇博文知道，我们可以通过::v-deep样式穿透或者:deep()深度选择器去修改，但有同学就发现怎么都修改不了，便跟博主发来了文件，其实原因很简单，因为对话框在出现时是属于body的

也就是说，在css中，不能把:deep()放在任何的父选择器下面，不然都会出现修改不了的情况

正确的修改就是

<style lang="scss" scoped>
  :deep(.el-dialog__footer ) {
    border: 0;
  }
  :deep(.el-dialog__body) {
    border: 0;
  }
<style>

如在前端开发中有任何问题，可私聊博主