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

最新推荐文章于 2024-03-21 10:26:01 发布
最新推荐文章于 2024-03-21 10:26:01 发布
阅读量3.2k 收藏 4
点赞数 3
分类专栏： web前端 文章标签： react
Wu
本文链接：https://blog.csdn.net/weixin_45236604/article/details/123654864
版权

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

 

 

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

Algorithm.Wu
关注
  • 3
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
R-Design:基于 react native 和 Ant Design Mobile 的移动端UI组件设计库
05-18
R-Design R-Design 是基于react native 和 antd-mobile的移动端RN UI Widget。 特性 基于 React Native 的多平台支持。 自由的视觉样式配置，适应各类产品风格。 提供类型定义文件index.d.ts,一看便知如何使用,方便自动提示。 为什么使用它 在这里首先十分感谢蚂蚁金服ant design mobile团队开发的UI Widget，可以说十分方便了，但是使用过程中还是有不少问题，例如部分组件修改样式不方便或者说组件的部分样式无法修改，输入框在RN环境下使用时clear按钮无法显示,inputItem,Switch必须在List下工作等等问题，其他问题可以看官方issue,总体来说ant design mobile服务于蚂蚁及口碑无线业务更加合适。 RN官方提供的checkbox组件不知道在哪里。 RN官方提供的FlatLis
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进行设置，可以修改一部分对话框样式（此处只截取部分） 使用： （...
react ant design radio group, 自定义modal样式，radio样式
Martin 的博客
03-21 241
遇到的问题：自定义modal的样式，修改radio/ radio group 的样式。modal 里面需要一个list 列表，列表有单选框，并且可以确认。
ant-design-draggable-modal:Ant Design的Modal，可拖动
05-02
蚂蚁设计可拖动模态 Ant Design的模态，可拖动。 :globe_showing_Americas: :sparkles: 特征 用标题栏拖动。 调整大小与句柄。 保持界限。 在拖动过程中。 调整大小期间。 在调整窗口大小期间。 具有托管zIndex多个模态。 从中心打开。 用作受控组件的更好的API。 从象限打开。 更好的转义密钥管理。 使用选项键调整大小。 :package: 安装 yarn add ant-design-draggable-modal 注意：您必须使用react@16.8.0和react[email protected]或更高版本。 :hammer: 用法 import React , { useState , useCallback } from 'react' import { Button } from 'antd' import { DraggableModal , DraggableModalProvider } from
vue2vue3项目-antd
weixin_58431406的博客
02-20 2424
vue2项目-引入antd、vue3项目-引入antd、vue2项目搭建layout案例、vue3项目搭建layout案例、增删改查案例 (vue2写法和vue3写法)
vue学习
qq_42373007的博客
10-06 93
122222
【笔记】解决react中使用antd的Modal无法改变样式的问题
丘山小月半的博客
05-07 4239
在设置样式时，为了防止样式影响全局，通常我使用 .父容器类名 .子类名的方式，但发现无论怎么写，都无法改变Modal的样式，仔细查看API发现 Modal默认挂载节点为document.body，因此，指定Modal挂载的dom即可，为Modal加入属性getContainer如下： getContainer={()=>document.getElementsByClassName('fa...
Ant Design Modal模态框添加类名后样式不生效
Smallwhitestrive的博客
08-18 1374
其实是包裹的问题，原因就是模态框他被渲染在外部了，并没有渲染在包裹模态框的组件里，所以渲染不出我们想要的效果。在使用Ant Design的模态框的时候，添加类名后，对其样式一顿操作，一保存在页面一看，煮熟的样式飞了🤔。然后跑到页面一看，啥样式都没生效啊，然后就开始怀疑人生 . . . . . .怀疑自己里面的样式或者类名没写对，怀疑样式写错了 . . . . . .而我们只需要将模态框的样式放在和组件平级的层级就可以了。怀疑类名没加上 . . . . .这样就可以解决样式不生效的问题啦😁。...
vue antd表格和modal一起使用时表格样式改变
baidu_40660633的博客
04-30 1439
实现的功能是点击编辑然后弹出modal框，结果点击编辑后表格里的样式忽然变了。按道理modal是不影响后面页面的样式。 这是原先的样式 这是点击跳出modal后的样式 仔细看了控制台代码， 这是点击前的控制台截图 这是点击后控制台的截图 无缘无故多了个div！ 最后发现，其实是我在table中写了v-if来控制弹出modal，才导致出现这个div，只要把这个语句放在table外面，就不会出现...
antd 两个modal弹窗，一个基于另一个位置固定
daxi玫瑰的博客
06-02 784
antd 两个modal弹窗，一个基于另一个位置固定
动手实现react Modal组件
u011927449的博客
05-15 1186
Modal组件 长话不多说，接下来让我们来动手实现一个react Modal组件。 我们先来看一下实际效果 Modal的布局 首先，让我们先思考下一个Modal组件的布局是怎么样的。 我们先拿一个基本的Modal样例来分析下。 如上图所示，一个Modal组件可以分为mask、header、body和footer四部分，mask就不用说了，header主要是显示title和关闭按钮，body则是使用者自己传的内容，footer主要是按钮控件。 Modal组件的参数(props) 我们确定了Modal组件的布局
antd-mobile-rn:一个基于 Ant Design Mobile RN 的 UI 组件库
05-23
@sishuguojixuefu/antd-mobile-rn 是 Ant Design 的移动规范的 React 实现，服务于蚂蚁及口碑无线业务。通知新版本3.x已经重构完成并发布，安装升级请查看特性基于 Ant Design 移动设计规范。规则化的视觉样式配置，...
react使用antd表单赋值,用于修改弹框的操作
01-18
补充知识：react中使用antd的表单重置数据 resetFields 重置一组输入控件的值（为 initialValue）与状态，如不传入参数，则重置所有组件 Function([names: string[]]) 注：initialValue有值时会
zelda-rc：故事书+ react + antd开发组件库
02-04
这是基于 + + 技术栈开发的组件库，对ant design进行二次封装，致力于满足公司对ant design组件的个性化设置。 :package:安装 npm install zelda-rc --save-dev 或者 yarn add zelda-rc -dev :hammer:示例 import ...
基于antd-vue的可拖拽弹窗
youzigrowing的博客
02-01 454
【代码】基于antd-vue的可拖拽弹窗。
React共享单车后台管理系统开发——UI菜单button modal的使用（Andt UI组件）
王依米
11-04 1193
https://blog.csdn.net/qq_34829447/article/details/81977779 一.按钮组件 1.Card组件 引入Card:import {Card} from 'antd'; title属性用于标注卡片上方标题 如:<Card title="基础组件"></Card>效果如下 一.按钮组件 1.Card组件 引入Card...
node-v4.8.6-win-x64.zip
05-07
Node.js，简称Node，是一个开源且跨平台的JavaScript运行时环境，它允许在浏览器外运行JavaScript代码。Node.js于2009年由Ryan Dahl创立，旨在创建高性能的Web服务器和网络应用程序。它基于Google Chrome的V8 JavaScript引擎，可以在Windows、Linux、Unix、Mac OS X等操作系统上运行。 Node.js的特点之一是事件驱动和非阻塞I/O模型，这使得它非常适合处理大量并发连接，从而在构建实时应用程序如在线游戏、聊天应用以及实时通讯服务时表现卓越。此外，Node.js使用了模块化的架构，通过npm（Node package manager，Node包管理器）,社区成员可以共享和复用代码，极大地促进了Node.js生态系统的发展和扩张。 Node.js不仅用于服务器端开发。随着技术的发展，它也被用于构建工具链、开发桌面应用程序、物联网设备等。Node.js能够处理文件系统、操作数据库、处理网络请求等，因此，开发者可以用JavaScript编写全栈应用程序，这一点大大提高了开发效率和便捷性。 在实践中，许多大型企业和组织已经采用Node.js作为其Web应用程序的开发平台，如Netflix、PayPal和Walmart等。它们利用Node.js提高了应用性能，简化了开发流程，并且能更快地响应市场需求。
基础运维技能（下）md格式笔记
最新发布
05-07
基础运维技能（下）md格式笔记
node-v8.1.2-linux-armv7l.tar.xz
05-07
Node.js，简称Node，是一个开源且跨平台的JavaScript运行时环境，它允许在浏览器外运行JavaScript代码。Node.js于2009年由Ryan Dahl创立，旨在创建高性能的Web服务器和网络应用程序。它基于Google Chrome的V8 JavaScript引擎，可以在Windows、Linux、Unix、Mac OS X等操作系统上运行。 Node.js的特点之一是事件驱动和非阻塞I/O模型，这使得它非常适合处理大量并发连接，从而在构建实时应用程序如在线游戏、聊天应用以及实时通讯服务时表现卓越。此外，Node.js使用了模块化的架构，通过npm（Node package manager，Node包管理器）,社区成员可以共享和复用代码，极大地促进了Node.js生态系统的发展和扩张。 Node.js不仅用于服务器端开发。随着技术的发展，它也被用于构建工具链、开发桌面应用程序、物联网设备等。Node.js能够处理文件系统、操作数据库、处理网络请求等，因此，开发者可以用JavaScript编写全栈应用程序，这一点大大提高了开发效率和便捷性。 在实践中，许多大型企业和组织已经采用Node.js作为其Web应用程序的开发平台，如Netflix、PayPal和Walmart等。它们利用Node.js提高了应用性能，简化了开发流程，并且能更快地响应市场需求。
请帮我实现用react+antdesign实现的弹出框点击确定能够成功调用后端接口
06-01
好的，首先需要创建一个弹出框组件，可以使用Ant Design中的Modal组件。然后需要在点击确定按钮时，调用后端接口。这里我假设后端接口已经提供，并且使用axios库发送请求。 首先在组件中引入Modal和axios库： ``` import React, { useState } from "react"; import { Modal } from "antd"; import axios from "axios"; ``` 然后创建一个函数，用来发送请求： ``` const sendData = async () => { try { const response = await axios.post("your-backend-api-url", { // 这里填写需要发送给后端的数据 }); console.log(response.data); // 打印后端返回的数据 } catch (error) { console.error(error); } }; ``` 接下来创建弹出框组件： ``` const MyModal = () => { const [visible, setVisible] = useState(false); const showModal = () => { setVisible(true); }; const handleOk = () => { sendData(); // 在点击确定按钮时调用sendData函数 setVisible(false); }; const handleCancel = () => { setVisible(false); }; return ( <> <button onClick={showModal}>打开弹出框</button> <Modal title="弹出框标题" visible={visible} onOk={handleOk} onCancel={handleCancel} > <p>这里可以填写弹出框的内容</p> </Modal> </> ); }; ``` 最后将MyModal组件添加到需要显示的页面中即可。 需要注意的是，如果后端接口需要验证用户身份等信息，可能需要在发送请求时添加请求头等信息。具体可以参考axios库的文档。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值