ElementUI中嵌套对话框中元素的样式不生效问题-也就是第二层弹出框

今天我遇到了一个问题，解决了好久：

• 就是Dialog对话框的样式问题，第一层对话框写了一个样式生效了，写了第二层，也就是嵌套对话框，在第二层同样也需要这个样式。但是怎么都没有生效。

• 于是，我上网找了资料，看了很多人的解决方法。依旧没有解决。于是乎，我认真看element的文档。

• 发现因为嵌套对话框需要添加 append-to-body 属性，这个属性描述是：Dialog 自身是否插入至 body 元素上。嵌套的 Dialog 必须指定该属性并赋值为 true。我发现是插入在body上，我检查一下我的HTML结构和css结构。

下面是不正确的写法

HTML的结构是这样的（使用的vue框架）：

<template>
  <div class="bigbox">
    <el-dialog
      title="title"
    >
        <el-dialog
        	append-to-body
        	custom-class="innerDialog"
      	>
            <div class="box">
                
    		</div>
    	</el-dialog>
    </el-dialog>
  </div>
</template>

css结构（用了scss）：

<style scoped lang="scss">
	.bigbox {
    	.innerDialog {
        	.box {
            	// 写的样式 ！！！这时样式不生效。虽然HTML的结构没有问题
        	}
    	}
	}
</style>

下面是正确的写法

HTML结构是没有问题的,只修改了css

css结构（用了scss）：

<style scoped lang="scss">
	.bigbox {
	}
    .innerDialog {
        .box {
            // 这样就生效了！
        }
    }
</style>

具体我也不知道是什么原因，大概是因为添加 append-to-body 属性的原因吧。使得它添加到了body上。用这个方法我解决了问题，希望遇到同样问题的人也可以快速地解决吧。如果有人知道什么原因，可以告诉我一下，私信也可以。文章可能写得不好，也可能有不对的地方。不过按照这个方法写，应该是能解决的。