• 想要将 弹框 el-dialog__header .el-dialog__body 的padding值设为0,但是

( el-dialog 用了 append-to-body 属性情况下)
官网解释 :Dialog 自身是否插入至 body 元素上。嵌套的 Dialog 必须指定该属性并赋值为 true

代码如下: (加上scoped,样式不生效)

<style lang="scss">
:deep( .el-dialog ){
  	 	 .el-dialog__header{
 		   padding: 0 ;
		}
	 .el-dialog__header + .el-dialog__body{
  		  padding: 0 ;                 
	 }
	 .el-dialog__body{
  		  padding: 0 ;
 	 }
}
</style>

解决方案: 弹框加上 自定义类名 custom-class

 <template>
 		<el-dialog v-model="visible" append-to-body    custom-class="dialog-class">    </el-dialog>
 </template>
---------------------------------------------------
<style lang="scss">
	.dialog-class{
 	   border-radius: 12px;
  	  .el-dialog__header{
 		   padding: 0 ;
}
	 .el-dialog__header + .el-dialog__body{
  		  padding: 0 ;                 
 }
	 .el-dialog__body{
  		  padding: 0 ;
  }
}
</style>
-------------这里写弹框里其他内容的样式--------------------------------
<style lang="scss" scoped>
:deep( .calss){
}
</style>

• 将append-to-body 属性去掉 使用以下方法即可使:deep()生效
  需要div包住 el-dialog

 <template>
	 <div>
 			<el-dialog v-model="visible" append-to-body    custom-class="dialog-class">    </el-dialog>
 	 </div>
 </template>
 
<style lang="scss" scoped>
:deep(  .el-dialog){
	 .el-dialog__header{
 		   padding: 0 ;
	}
	 .el-dialog__header + .el-dialog__body{
  		  padding: 0 ;                 
	 }
	 .el-dialog__body{
  		  padding: 0 ;
	  }
	.main{
	}
}
</style>