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

1. 为什么要添加append-to-body属性

在写弹框嵌套时我们需要添加append-to-body属性，否则后弹出的框就会有遮盖层遮挡，如下图

2.为什么会修改无效

我们想改变某个弹窗的原来样式，通常是在该弹框外包一个div，然后修改该div下的dialog样式，但是添加append-to-body属性为true后，Dialog 将插入 body 元素上，也就是说它并不在该div元素之下了，因此修改无效。

3.添加了append-to-body属性的dialog样式修改方式

在dilog组件上定义class类，然后修改该类下的dialog本来的样式，这样就没有问题了

html

<div class="inform">
	<el-dialog
	  :visible.sync="dialogVisible"        
	   width="800px">
	     <div class="dialogBox">
	       第一层弹框内容
	     </div>
	</el-dialog>
</div>	
//嵌套的弹框
<el-dialog
  :visible.sync="iframeVisible"        
   width="600px" 
   append-to-body
   class="iframe-dialog">
     <div class="dialogBox">
       第二层弹框内容
     </div>
</el-dialog>

css

<style lang="scss" scoped="scoped">
 /deep/.iframe-dialog .el-dialog__header{
     padding: 0 !important;
 }
/deep/.iframe-dialog .el-dialog__body{
  padding: 0 !important;
}
</style>