vue中使用element-plus中的el-dialog无法修改其样式

<template>
    <el-dialog v-model="dialogVisible" title="详情" width="40%">
      <el-scrollbar height="500px">
        <el-descriptions :column="1" border>
          <el-descriptions-item label="任务编号" min-width="120">
            {{ detailData.id }}
          </el-descriptions-item>
          <el-descriptions-item label="任务名称">
            {{ detailData.name }}
          </el-descriptions-item>
          <el-descriptions-item label="所属流程">
            {{ detailData.processInstance.name }}
          </el-descriptions-item>
          <el-descriptions-item label="流程发起人">
            {{ detailData.processInstance.startUserNickname }}
          </el-descriptions-item>
          <el-descriptions-item label="状态">
            <el-tag :type="getResult(detailData.result).label.colorType">
              {{ getResult(detailData.result).label }}
            </el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="原因">
            {{ detailData.reason }}
          </el-descriptions-item>
          <el-descriptions-item label="创建时间">
            {{ formatDate(detailData.createdTime) }}
          </el-descriptions-item>
        </el-descriptions>
      </el-scrollbar>
    </el-dialog>
</template>

在style里无法修改样式

<style scoped>
::v-deep(.el-dialog__body) {
  padding: 20px 30px !important;
}
</style>

解决办法 1.在el-dialog标签外面套一层div即可 2.使用el-dialog的属性wrap-class