解决react + Ant design 中的modal样式问题

最新推荐文章于 2025-06-13 16:48:47 发布
最新推荐文章于 2025-06-13 16:48:47 发布
阅读量4.1k 收藏 5
点赞数 3
CC 4.0 BY-SA版权
分类专栏： web前端 文章标签： react
Wu
本文链接：https://blog.csdn.net/weixin_45236604/article/details/123654864
在React项目中使用Ant Design的Modal组件时遇到样式覆盖问题，导致所有Modal样式混乱。通过研究Modal的API，发现可以利用`wrapClassName`属性为每个Modal设置独立的外层容器类名，从而避免样式冲突。这个方法使得我们可以自定义Modal样式而不会影响其他组件。

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

最近在做react项目，使用的是ant design组件，在使用modal的时候出现了修改.ant-modal-content类名的样式时，凡使用modal的组件样式都发生了改变。这个问题找了半天没解决。在modal外面加了div,加了className,仍然不起作用，造成各组件样式混乱。后来查询了资料，看了modal的官方API,发现modal有个wrapClassName的API,wrapClassName是对话框外层容器的类名， 所以我们可以通过它来控制各个组件的modal样式，还不会相互影响。

 

 

这样我们就可以自定义modal的样式了~~~~ 

【React工作记录八十七】React+antDesign实现上传图片功能(类组件)
geyaoisnice的博客
03-15 276
我是歌谣 放弃很容易 但是坚持一定很酷 微信公众号关注前端小歌谣带你进入前端巅峰交流群。
react +Ant design 新增、编辑、删除模态框(获取id)
qq_42360843的博客
07-03 7670
一、新增模态框 首先绑定事件： Ant design 里 modal 对话框 按照自己的需求，修改下参数 ： import { Modal, Button } from 'antd'; class Ad extends React.Component { constructor(props) { super(props); this.state = { n...
Ant Design Modal模态框添加类名后样式不生效
Smallwhitestrive的博客
08-18 1875
其实是包裹的问题，原因就是模态框他被渲染在外部了，并没有渲染在包裹模态框的组件里，所以渲染不出我们想要的效果。在使用Ant Design的模态框的时候，添加类名后，对其样式一顿操作，一保存在页面一看，煮熟的样式飞了🤔。然后跑到页面一看，啥样式都没生效啊，然后就开始怀疑人生 . . . . . .怀疑自己里面的样式或者类名没写对，怀疑样式写错了 . . . . . .而我们只需要将模态框的样式放在和组件平级的层级就可以了。怀疑类名没加上 . . . . .这样就可以解决样式不生效的问题啦😁。...
react如何自定义Ant Design对话框Modal的样式
前端小白的学习分享小世界
07-17 1万+
在官方api中写到可以为Modal添加类名，那么就可以通过类选择器进行样式的设置
处理antd modal内部样式修改问题
最新发布
weixin_72552407的博客
06-13 175
需要更改绑定挂载dom，通过属性getContainer进行ref挂载。直接修改modal样式不生效。然后在深度修改一些样式。
ant-design-vue a-model中 .ant-modal-content样式修改
weixin_44565776的博客
02-01 5947
在使用ant-design-vue样式框架时，经常会用到弹框，有时一个页面可能会弹出多个不同风格弹框，那么如何去对不同的弹框进行样式处理，并且彼此之间不冲突呢？无法自定义modal内部的样式？那么这篇文章能给你一些方向的指导和实操的案例
【笔记】解决react中使用antd的Modal无法改变样式的问题
丘山小月半的博客
05-07 4567
在设置样式时，为了防止样式影响全局，通常我使用 .父容器类名 .子类名的方式，但发现无论怎么写，都无法改变Modal的样式，仔细查看API发现 Modal默认挂载节点为document.body，因此，指定Modal挂载的dom即可，为Modal加入属性getContainer如下： getContainer={()=>document.getElementsByClassName('fa...
解决 Ant Design V5 样式兼容问题
徐同保的专栏
08-15 1336
解决 Ant Design V5 样式兼容问题
ant design修改modal的样式、修改.ant-modal-content属性
热门推荐
xxtz0522的博客
06-03 4万+
问题描述： 写了一个组件（index.tsx），引用了ant design的modal组件， 在index.less里修改modal组件的.ant-modal-content的css样式无效（给modal组件添加了update-panel对话框外部类名）： 解决办法： （1）通过modal的API进行设置，可以修改一部分对话框样式（此处只截取部分） 使用： （...
ant-design-draggable-modal:Ant Design的Modal，可拖动
05-02
yarn add ant-design-draggable-modal 注意：您必须使用react@16.8.0和react-dom@16.8.0或更高版本。 :hammer: 用法 import React , { useState , useCallback } from 'react' import { Button } from 'antd' ...
Fullcalendar 日历 React+Ant Design项目
weixin_66941748的博客
01-19 957
话不多说，直接附上效果图加源码！
前端react+Ant Design 给穿梭框Transfer 添加导入导出按钮，难点在于导入数据后怎么赋值给右侧
m0_72154126的博客
06-04 1085
react+Ant Design 给穿梭框Transfer
解决Vue3使用 Ant Design，出现多个Modal，全是黑屏，导致列表页看不见问题！
专研技术结交志同道合的朋友
02-07 282
尴尬问题 不报错，但是我看着就难受。 求知路上 请教了下强哥，强哥告诉我可能某个样式属性失效引起(无效)，建议我F12看下样式。 接着，我F12狂看元素样式，查了一个小时未果，我真抓狂了。 都想明天问同事了，但我感觉自己能行，就又坚持了一下。 结果，在摸索过程中，不断在控制台尝试，打印dom对象及属性，一查就知道了，原来点击新增，编辑按钮，每次都能弹出5个对话框。 锁定问题 定位到问题就好办了...
react: antd修改元素内容样式
qq_36413371的博客
11-06 318
在 模块.module.scss中添加样式。
antd Modal 修改弹框样式不生效问题
apple_2021的博客
04-02 3992
用了很久的antd Modal，今天突然有个弹框左右布局的需求，我在css中设置弹性盒模型，却发现样式一直不生效，经查资料，总结一下。
使用了css modules怎么修改antd组件的默认样式，修改antd的样式
MFWSCQ的博客
10-09 7740
使用了css-loader中的css modules来打包代码，想要直接在css中修改antd中的样式但是类名会被加上hash值，应用不到antd的样式上，另外antd的类名不经css-modules改变（配置）。 我要修改的是antd中的样式，用自己的样式覆盖默认的样式，比如modal中的背景颜色。使用:global来修改： :global{ .ant-modal-...
vue antd表格和modal一起使用时表格样式改变
baidu_40660633的博客
04-30 1549
实现的功能是点击编辑然后弹出modal框，结果点击编辑后表格里的样式忽然变了。按道理modal是不影响后面页面的样式。 这是原先的样式 这是点击跳出modal后的样式 仔细看了控制台代码， 这是点击前的控制台截图 这是点击后控制台的截图 无缘无故多了个div！ 最后发现，其实是我在table中写了v-if来控制弹出modal，才导致出现这个div，只要把这个语句放在table外面，就不会出现...
ant-design-vue中对a-model使用穿透属性仍然改不了样式的解决办法
Yukinoshita_kino的博客
11-15 1万+
ant-design-vue中对a-model使用穿透属性仍然改不了样式的解决办法
antd vue a-model 在组件内修改样式无效的原因
逆风优雅的博客
06-06 1568
针对无法修改样式的情况可以：将a-model的挂载点设置到这个组件的页面。所以当我们在应用这个组件的页面中 修改它的样式是无效的。这样就可以在使用到这个组件的页面 进行修改样式了。a-model组件默认是挂载在body中的。
React+Ant Design 社区团购管理系统源码开发
资源摘要信息: "基于React、Ant Design开发的社区团购管理系统源码" 本文将详细介绍基于React框架和Ant Design UI库开发的社区团购管理系统的核心技术和实现细节。社区团购作为一种新兴的电商模式，通过集合社区内...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值