elementui弹窗Dialog添加append-to-body后修改原样式无效

在Element UI中，给el-dialog组件添加append-to-body属性后，可以将对话框的内容添加到body标签的最外层，这样可以避免它被父容器的定位方式影响。但是，这样做可能会导致样式的应用范围发生改变，因此原有的样式修改可能不再有效。

要解决这个问题，你可以通过以下方法来确保样式仍然有效：

1. 使用深度选择器（deep selector）来确保你的CSS规则能够应用到添加了append-to-body属性的对话框内容上。

/* 正常的类选择器 */
.el-dialog {
  /* 你的样式 */
}
 
/* 深度选择器，确保添加到body的对话框内容也受样式影响 */
.el-dialog[append-to-body] {
  /deep/ .el-dialog__header {
    /* 修改对话框头部的样式 */
  }
 
  /deep/ .el-dialog__body {
    /* 修改对话框主体的样式 */
  }
 
  /deep/ .el-dialog__footer {
    /* 修改对话框脚部的样式 */
  }
}

2. 如果你使用的是Scoped CSS，则需要使用::v-deep选择器来替代/deep/。

.el-dialog[append-to-body]::v-deep .el-dialog__header {
  /* 修改对话框头部的样式 */
}
 
.el-dialog[append-to-body]::v-deep .el-dialog__body {
  /* 修改对话框主体的样式 */
}
 
.el-dialog[append-to-body]::v-deep .el-dialog__footer {
  /* 修改对话框脚部的样式 */
}

确保你的样式规则在合适的时机被加载，并且在Vue组件的作用域内正确应用。如果你在开发工具中看到样式没有效果，可能是因为CSS的加载顺序问题或者选择器优先级不足导致的。