vue3 - Ant Desgin Vue 组件库中修改对话框 a-modal 头部样式，ant框架中修改模态框modal头部样式（提供详细代码，完美解决使用/deep/或者v-deep无效的问题）

已于 2024-09-12 16:01:24 修改
阅读量3.5k 收藏 3
点赞数 3
分类专栏： 前端组件与功能(开箱即用) 前端常见问题解决 文章标签： vue3 ant design vue 修改弹框组件a-modal样式 修改模态框modal头部样式 ant desi对话框组件样式 a-modal无法deep选中 vue3 a-moda样式穿透
于 2023-11-07 19:36:09 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_50545213/article/details/134274106
版权
在Vue3项目中使用Ant Design Vue时，遇到a-modal对话框头部header样式修改困难的问题。通过文中提供的详细代码示例，解决了/deep/和::v-deep穿透无效的状况，介绍了一种有效的方法，确保能够成功修改a-modal头部样式。
摘要由CSDN通过智能技术生成

效果图

在vue3+ant design vue组件库项目开发中，强力修改 a-modal 对话框(模态弹框) 头部 header 样式，解决各种deep选不中类或改不了的问题。

在这里插入图片描述

示例代码

用下面的办法，绝对可以搞定。

了解本专栏 订阅专栏 解锁全文
街尾杂货店&
关注
专栏目录
订阅专栏
vue3+ant-design-vue - 最新实现“侧边动态导航栏+面包屑导航“功能，vue3+ant后台管理系统左侧动态菜单栏和面包屑菜单实现，面包屑和菜单根据路由动态自动处理（详细示例代码）
高级前端工程师
04-02 2585
vue3，ant-design-vue，antd，el-breadcrumb，a-menu，动态导航栏和面包屑，vue3+ant design vue动态面包屑，动态导航栏，菜单栏，vue3监听路由变化,动态修改面包屑，antd-vue3实现面包屑，vue3中使用antd-vue实现面包屑导航，头部面包屑导航，vue后台管理系统，面包屑头部导航栏，详细示例demo，动态生成面包屑导航教程，新手小白详细示例，面包屑和布局和菜单demo，面包屑和导航菜单的联动，如何跟随路由变化，监听路由变化,动态修改面包屑，v
vue3.0修改antdesginVue中对话框组件（＜a-modal＞）的头部样式
我只是个很菜的前端
05-29 1461
vue3.0修改antdesginVue中对话框组件（）的头部样式
Vue3.0更改ant design vue 更改modal样式
weixin_53934815的博客
09-05 1635
原理也很简单，加上 scoped 属性后，在浏览器查看开发工具你会发现，组件模板里的每个 DOM 元素多了一个属性data-v-xxx，CSS 规则也有对应的属性选择器。配合 CSS属性选择器，样式规则就只应用到对应的组件了，这样就能防止互相干扰了。在 Vue 单文件组件 (.vue 文件）中给 style 标签加上 scoped 属性，然后里面定义的样式规则就会只作用于当前组件，不会影响到其他组件。deep 的原理就是将属性选择器里的属性移到上层，这样就能作用到所有子元素了。
Vue3中使用Ant Design Vue组件库中modal，如何改变其样式?
jsbbhx的博客
07-15 666
【代码】Vue3中使用Ant Design Vue组件库中modal，如何改变其样式?
Vue3.0封装Modal组件,Modal中的内容可自定义传入组件,input，radio等等(模仿像react一样传递),使用到的知识点：v-bind,v-on
weixin_38949279的博客
10-19 744
由于在React中可以直接使用{...item}来展开对象属性，这种写法在Vue3.0中是没有的，除非在Vue中使用JSX的写法。
Vue3 使用 ant design vue组件更改modal样式
weixin_73077230的博客
06-12 627
2.调用getContainer api 是指定 Modal 挂载的 HTML 节点 ：getContainer=“() => orderModal”antd中大部分组件的样式都可以使用:deep直接修改，但modal组件不行。1.在外部包一个div ref=“globalModal”3.利用:deep 对于css进行样式更改。
ant design ui 的a-modal 样式修改
m0_54570434的博客
05-04 3411
此前一直不知道如何去修改modal对话框的样式，没错去改ant-modal-header 这些样式都没反应。今天看到了它给点API里面有一个getContainer getContainer 指定 Modal 挂载的 HTML 节点 (instance): HTMLElement () => document.body 当不设置它时，是挂载到body下面。 <div class="zr"> <a-button type="primary".
ant-design-vue a-model中 .ant-modal-content样式修改
weixin_44565776的博客
02-01 2951
在使用ant-design-vue样式框架时，经常会用到弹框，有时一个页面可能会弹出多个不同风格弹框，那么如何去对不同的弹框进行样式处理，并且彼此之间不冲突呢？无法自定义modal内部的样式？那么这篇文章能给你一些方向的指导和实操的案例
vue3使用ant-design-vue的Modal的小技巧
Yosola的博客
04-26 6037
ant的modal挂载，移动
react-Ant Design框架中基础对话框和信息确认框的使用
weixin_45745641的博客
03-31 3306
前言 在项目中，对话框和确认框是使用频率很高的组件，这里记录一下react-Ant Design框架中它们的基础用法 基础对话框 首先要按需引入我们需要使用到的组件： import {Card, Button, Modal} from 'antd' 定义两个按钮，控制基础对话框的弹出： <Card title="基础对话框"> <Button type="primary" onClick={() => this.handleOpen('showModal')}>Open&
ant-design-vue中a-date-picker组件只选择年份/含表单验证（已解决）
热门推荐
weixin_43242112的博客
06-11 1万+
ant-design-vue中a-date-picker组件只选择年份 今天遇到了在日期选择器中只选择年份的日期选择器，但是是使用的ant-design-vue，目前还没有只选择年份的日期控件，但是需求还是要实现，上代码： 在template中 <a-date-picker mode="year" placeholder="请选择年份" format='YYYY' :value='yearPick' :open='yearPickShow' @pane
更改 ant design vue 更改modal样式 vue3.0
susanliy的博客
06-17 4608
antd中大部分组件的样式都可以使用/deep/直接修改，但modal这个组件有点特殊，用这个方法没有效果，最后用了以下方法： 步骤： 1.需要在外部包一个div ref=“globalModal” 2.调用getContainer api :getContainer=“() => $refs.globalModal” 3.利用deep 对于css进行样式更改...
vue3 a-modal对话框样式问题
m0_61134931的博客
06-09 764
global类似于把样式全局化(没有作用域了)，也会影响其他a-modal组件得样式，:global更适用于button,input的使用。1. :global(选择器){css}只需在 a-modal加上style即可。2. 默认情况下会加一个行内样式。
ant design for Vue 修改组件默认样式
zhanghuaiwei
08-04 2150
ant design for Vue 修改组件默认样式
Vue项目中修改antd提供的组件样式
wyw15667121424的博客
09-02 1671
Vue项目中修改antd提供的组件样式
vue3+antdv的Modal的样式设置
我的愿望太多了
12-22 850
在Modal外层套div并设置div的ref='mod'，Modal设置 :get-container="() => $refs.mod" 和 :bodyStyle="bodyStyle" ，样式就生效了，若还未生效，重启项目即可。
vue3中ant design使用
最新发布
猿脑2.0的博客
07-31 942
Ant Design Vue 支持自定义主题，你可以通过修改 SCSS 变量来定制主题。新建一个 SCSS 文件，例如。在这个文件中覆盖 Ant Design Vue 的 SCSS 变量。scss在入口文件中引入这个自定义样式文件：javascript// main.js 或 main.ts确保你的项目环境支持 SCSS，并且已经正确配置了相关 loader。通过以上步骤，你可以在 Vue 3 项目中使用 Ant Design Vue 组件库。
企业级Vue组件库ant-design-vue 3.0.0-alpha.3发布
该压缩包文件集包含了基于Ant Design设计语言和Vue.js框架的企业级用户界面(UI)组件库的alpha版本。Ant Design是一个由阿里巴巴团队开发的前端设计语言，提供了一整套美观、专业、统一的视觉和交互模式，旨在提升...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

街尾杂货店&

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值