el-dialog使用::v-deep()穿透设置样式不生效,解决办法亲测有效!

场景:

javascript 复制代码
    <el-dialog
      v-model="dialogVisible"
      width="800px"
      :before-close="beforeClose"
      append-to-body
      :close-on-click-modal="false"
      title="增加文档"
    >
     <template #footer>
      <div style="text-align:center">
        <el-button type="primary" @click="saveFieldOption" :disabled="confirmUpload">
          确 定 
        </el-button>
        <el-button @click="uploadDialogClose">取 消</el-button>
      </div>
    </template>
    </el-dialog>

    <style lang="scss" scoped>
    ::v-deep(.el-dialog__header) {
      border-bottom: 1px solid #E7E7E7 !important;
      color:#3D3D3D !important;
    }
    ::v-deep(.el-dialog__body) {
      padding: 24px 40px  12px !important;
    }
    </style>

如上:我想给header插槽增加下边框 ,并且想改变el-dialog__body盒子的内边距,但是不生效。

解决方案

el-dialog加个,在不带scope 的**<style></style>**中设置样式,如下:

javascript 复制代码
    <el-dialog
      class="dialog-bar"
    >
    </el-dialog>

样式:

javascript 复制代码
<style lang="scss">
.dialog-bar{
  .el-dialog__body {
    padding: 24px 40px  12px !important;
  }
  .el-dialog__header {
    border-bottom: 1px solid #E7E7E7 !important;
    color:#3D3D3D !important;
  }
}
</style>

实现效果如下:

注意

  • <style></style> 中如果不添加scope,则其中的样式会在所有页面生效,所以务必给该el-dialog添加一个全局都不会重复的类名或者Id属性
  • <style></style>可以与<style scoped></style> 同时存在于同一个组件,两者并不会冲突,除了el-dialog之外的其他样式还是应该写在**<style scoped></style>** 中,如下图:
javascript 复制代码
<style lang="scss">
.dialog-bar{
  .el-dialog__body {
    padding: 24px 40px  12px !important;
  }
  .el-dialog__header {
    border-bottom: 1px solid #E7E7E7 !important;
    color:#3D3D3D !important;
  }
}
</style>

<style lang="scss" scoped>
//除了el-dialog之外的其他样式
</style>

好了,本文就到这里吧,**++点个关注++**再走嘛~

🚀 个人简介:7年开发经验,现任职某国企前端负责人,分享前端相关技术与工作常见问题~

💟 作 者:前端菜鸟的自我修养❣️

📝 专 栏:前端常见问题汇总,避坑大全

🌈 若有帮助,还请 关注➕点赞➕收藏,不行的话我再努努力💪💪💪

相关推荐
耶啵奶膘30 分钟前
uniapp-是否删除
linux·前端·uni-app
王哈哈^_^2 小时前
【数据集】【YOLO】【目标检测】交通事故识别数据集 8939 张,YOLO道路事故目标检测实战训练教程!
前端·人工智能·深度学习·yolo·目标检测·计算机视觉·pyqt
cs_dn_Jie3 小时前
钉钉 H5 微应用 手机端调试
前端·javascript·vue.js·vue·钉钉
开心工作室_kaic3 小时前
ssm068海鲜自助餐厅系统+vue(论文+源码)_kaic
前端·javascript·vue.js
有梦想的刺儿3 小时前
webWorker基本用法
前端·javascript·vue.js
cy玩具4 小时前
点击评论详情,跳到评论页面,携带对象参数写法:
前端
customer084 小时前
【开源免费】基于SpringBoot+Vue.JS周边产品销售网站(JAVA毕业设计)
java·vue.js·spring boot·后端·spring cloud·java-ee·开源
清灵xmf4 小时前
TypeScript 类型进阶指南
javascript·typescript·泛型·t·infer
小白学大数据4 小时前
JavaScript重定向对网络爬虫的影响及处理
开发语言·javascript·数据库·爬虫
qq_390161774 小时前
防抖函数--应用场景及示例
前端·javascript