element-ui如何局部修改el-dialog的修改样式

要局部修改 `el-dialog` 的样式，可以使用 `scoped` 样式或者使用 `deep` 选择器。

方法一：使用 scoped 样式

在组件的 `<style>` 标签中使用 `scoped` 属性，可以将样式限定在当前组件内部，不会影响到全局样式。例如：

<template>
  <el-dialog>
    <!-- dialog content -->
  </el-dialog>
</template>

<style scoped>
.el-dialog__wrapper {
  background-color: #f1f1f1;
}
.el-dialog__header {
  background-color: #999;
  color: #fff;
}
</style>

方法二：使用 deep 选择器

在样式规则前添加 `/deep/` 或者 `>>>`，可以穿透组件的样式隔离，直接修改组件内部的样式。例如：

<template>
  <el-dialog>
    <!-- dialog content -->
  </el-dialog>
</template>

<style>
/* 使用 /deep/ */
/deep/ .el-dialog__wrapper {
  background-color: #f1f1f1;
}
/deep/ .el-dialog__header {
  background-color: #999;
  color: #fff;
}

/* 使用 >>> */
.el-dialog >>> .el-dialog__wrapper {
  background-color: #f1f1f1;
}
.el-dialog >>> .el-dialog__header {
  background-color: #999;
  color: #fff;
}
</style>

需要注意的是，使用 `deep` 选择器可能会影响到其他组件，所以建议只在必要的情况下使用。