Anidamiento de el-dialog, modificar el estilo interno de el-dialog (estilo personalizado)

Cuando el-dialog se utiliza anidado, el atributo append-to-body debe agregarse al el-dialog interno.

Agregue el atributo de clase personalizada al cuadro de diálogo interno y agregue un nombre de clase personalizado

<el-dialog
    :visible.sync="dialogVisible"
    append-to-body
    custom-class="tree-cesium-container"
  >
    <span>这是一段信息</span>
    <span slot="footer" class="dialog-footer">
      <el-button @click="dialogVisible = false">取 消</el-button>
      <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
    </span>
  </el-dialog>

Luego use la etiqueta de estilo sin alcance y el formato de escritura es el siguiente:

.tree-cesium-container .el-dialog__header {
  padding: 0px;
}
.tree-cesium-container .el-dialog__headerbtn {
  top: 10px;
  right: 10px;
}

Puedes modificar su estilo.

 ¡Hecho!

-------------------------------------------------- Línea divisoria manual----------------------------------------------- - ------------------

Por cierto, permítanme registrar cómo personalizar el estilo de el-dialog en una capa.

Envuelva un div en la capa exterior de el-dialog y personalice el nombre de la clase. El-dialog aquí no tiene anexo al cuerpo

<div class="event-add-or-update">
   <el-dialog
    :visible.sync="dialogVisible"
    custom-class="tree-cesium-container"
   >
    <span>这是一段信息</span>
    <span slot="footer" class="dialog-footer">
      <el-button @click="dialogVisible = false">取 消</el-button>
      <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
    </span>
   </el-dialog>
</div>

Luego modifique el estilo dentro de la etiqueta de estilo con alcance y estará bien.

<style scoped>
.event-add-or-update >>> .el-dialog__body {
  max-height: 750px;
  overflow: auto;
}
</style>

Las dos situaciones anteriores no afectarán a otros el-dialog, solo al actual ~