element-ui plus 修改对话框的样式，无效

<el-dialog
    v-model="dialogVisible"
    title="Tips"
    width="30%"
    :before-close="handleClose"
    append-to-body
  >
    <span>This is a message</span>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">Cancel</el-button>
        <el-button type="primary" @click="dialogVisible = false">
          Confirm
        </el-button>
      </span>
    </template>
</el-dialog>

// 修改对话框的样式，没有生效
<style lang="less" scoped>
::v-deep .el-dialog {
  border-radius: 10px !important;
}
::v-deep .el-dialog--center .el-dialog__body {
  padding: 18px 26px 5px !important;
}
</style>

原因：对话框el-dialog上添加了append-to-body属性（也不知道怎么加了这个属性）
解释：首页，什么时候用到append-to-body这个属性——>嵌套对话框的时候。
　　　官方对于嵌套对话框是这么说：不建议使用嵌套对话框。若需要在页面上呈现多个对话框，可以简单打平它们，让它们处于一个平级关系。
　　　若一定要对话框内展示另一个对话框，那就给内部嵌套的对话框设置append-to-body属性。但是这样的话，嵌套的对话框就会附加到body上，
　　　而不是父节点，这是为了两个对话框都可以被正确的渲染。
换句话：设置了append-to-body属性的el-dialog只受body的样式控制，不受父节点的样式控制。