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

如果您想要自定义 Element UI 的 `el-dialog` 样式，有以下两种方式：

1. 使用 `scoped` CSS

在 `el-dialog` 组件上添加 `scoped` 属性，然后使用 CSS 来修改样式。例如：

<template>
  <el-dialog
    title="Dialog Title"
    :visible.sync="dialogVisible"
    :close-on-click-modal="false"
    :show-close="false"
    scoped
  >
    <p>Dialog Content</p>
  </el-dialog>
</template>

<style scoped>
.el-dialog__header {
  background-color: #f0f0f0;
  color: #333;
}
.el-dialog__body {
  padding: 20px;
}
</style>

在上面的例子中，我们修改了 `el-dialog` 头部的背景色和字体颜色，以及内容区域的内边距。

2. 使用全局 CSS

在全局 CSS 文件中添加样式，来覆盖默认样式。例如：

.el-dialog__header {
  background-color: #f0f0f0;
  color: #333;
}
.el-dialog__body {
  padding: 20px;
}

在这种方式下，所有使用 `el-dialog` 组件的地方都会应用这些样式。

需要注意的是，如果您使用了 `scoped` CSS，那么您需要在样式中使用 `/deep/` 或者 `>>>` 来穿透组件的作用域。例如：

<template>
  <el-dialog
    title="Dialog Title"
    :visible.sync="dialogVisible"
    :close-on-click-modal="false"
    :show-close="false"
    scoped
  >
    <p>Dialog Content</p>
  </el-dialog>
</template>

<style scoped>
.el-dialog /deep/ .el-dialog__header {
  background-color: #f0f0f0;
  color: #333;
}
.el-dialog /deep/ .el-dialog__body {
  padding: 20px;
}
</style>

在上面的例子中，我们使用了 `/deep/` 来穿透 `el-dialog` 的作用域，来修改其样式。