element-ui修改dialog样式全局、局部修改问题 el-dialog__title/el-dialog__header/el-dialog__body/el-dialog__footer

本文链接：https://blog.youkuaiyun.com/qq_33697774/article/details/116307706

本文探讨了在Vue中，如何在保持局部样式作用域的同时，实现el-dialog样式自定义的问题。作者分享了使用 scoped CSS 的局限，并提出通过el-dialog类名进行全局css局部定义的解决方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

//没有scoped全局css全部文件生效但是其他地方用dialog样式也会生效

//有scoped为局部css --scoped只在本文件生效在这里设置el-dialog__header不生效

//因此通过el-dialog的class进行全局css中局部定义只在当前文件生效

<template>
<el-container><el-main>
<el-button type="text" @click="centerDialogVisible = true">点击打开 Dialog</el-button>
<el-dialog class="my-dialog-name"//自定义class
    title="提示"
    :visible.sync="centerDialogVisible"
    width="30%"
    center>
    <span>dialog内容</span>
    <span slot="footer" class="dialog-footer">
    <el-button @click="centerDialogVisible = false">取消</el-button>
    <el-button type="primary" @click="centerDialogVisible = false">确定</el-button>
</span>
</el-dialog>
</el-main></el-container>
</template>
<script>
export default {

    data() {
      return {
        centerDialogVisible: false
      }

    }
}
</script>
//没有scoped全局css全部文件生效但是其他地方用dialog样式也会生效
<style lang="scss">
.my-dialog-name{ //因此通过el-dialog的class进行全局css中局部定义只在当前文件生效
    .el-dialog__header{ //声明弹出框头dialog__header为蓝色内容和尾巴标题这样修改，具体可以修改的东西点F12看它渲染出来的内容
      text-align: left;
      background-color: #1482f0;
      border-bottom: 1px solid #e8eaec;
      .el-dialog__body {
      }
      .el-dialog__footer {
        text-align: center;
      }
    }
}
</style>

//有scoped局部css --scoped只在本文件生效在这里设置el-dialog__header不生效
<style lang="scss" scoped></style>