解决React中通过外部引入的css/scss/less文件更改antDesign中Modal组件内部的样式不生效问题

不生效原因

Ant Design 的 Modal 默认通过 ReactDOM.createPortal 挂在 <body> 下,与你的组件树平级,所以写在 .module.css / scoped less 里的选择器根本匹配不到它,就算写全局样式,也可能因为权重不足或异步挂载时机而“看不见”

解决方案
先通过 getContainer 把 Modal 拉进自己的 DOM 范围,再给它一个 wrapClassName,用高权重选择器随便改

让 Modal 挂到你自己的节点里(关键)

const wrapperRef = useRef(null);<div ref={wrapperRef}><ModalgetContainer={() => wrapperRef.current}   // ← 挂进来wrapClassName="my-modal-wrap"             // ← 给外层一个类名...>...</Modal>
</div>

用高权重选择器写样式(别吝啬 !important

/* 普通 CSS / less / sass 均可 */
.my-modal-wrap .ant-modal {color: red !important;
}

注:本人前端小白 ,如有不对的地方还请多多指教

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如若转载,请注明出处:http://www.pswp.cn/pingmian/96508.shtml
繁体地址,请注明出处:http://hk.pswp.cn/pingmian/96508.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

day41 51单片机最小系统、GPIO控制、时序逻辑器件(74HC138/595)与LED点阵驱动原理

day41 51单片机最小系统、GPIO控制、时序逻辑器件&#xff08;74HC138/595&#xff09;与LED点阵驱动原理一、嵌入式系统基础概念 1.1 嵌入式系统定义先设计硬件&#xff0c;基于硬件设计软件实现一个具体的功能 —— 专用的计算机系统硬件/软件可剪裁&#xff1a;根据功能需求…

html列表总结补充

1.有序列表的type属性不同的type值表示不同的排序标号1 表示列表项目用数字标号&#xff08;1,2,3...&#xff09; 1 a 表示列表项目用小写字母标号&#xff08;a,b,c...&#xff09; 2 A 表示列表项目用大写字母标号&#xff08;A,B,C...&#xff09; 3 i 表示列表项目用小写罗…

smartctl Current_Pending_Sector 硬盘待处理扇区

smartctl -a /dev/sdae当前值: 312 个待处理扇区 严重警告信号&#xff0c;硬盘发现了 312 个可疑扇区&#xff0c;正在等待重新分配 197 Current_Pending_Sector 0x0022 100 100 000 Old_age Always - 312读取错误频发 错误计数: 38 次 ATA 错误 …

MATLAB1-基本操作和矩阵输入-台大郭彦甫

目录 基础的指令 format 矩阵和向量 找出某行某列的矩阵元素 快速打出多个矩阵或者向量 矩阵连接 矩阵计算 一些特殊矩阵fuction 矩阵相关函数 基础的指令 clc 清空命令行窗口 clear all 清空工作区的全部变量 who 将工作区的全部变量显示出来 whos 工作区的变量信息详…

【CSS 3D 交互】实现精美翻牌效果:从原理到实战

效果图 前言 在现代网页设计中&#xff0c;交互效果是提升用户体验的重要手段。3D 翻牌效果作为一种常见的交互模式&#xff0c;广泛应用于卡片展示、问答切换、产品详情等场景。本文将详细介绍如何使用 CSS 3D 技术实现一个精美的翻牌效果&#xff0c;并深入解析其实现原理。…

Python核心技术开发指南(062)——静态方法

版权声明 本文原创作者:谷哥的小弟 作者博客地址:http://blog.csdn.net/lfdfhl 静态方法的定义 静态方法是类中定义的一种特殊方法,它不需要依赖类实例或类本身即可调用,也不隐含传递self(实例引用)或cls(类引用)参数。在Python中,通过@staticmethod装饰器来定义静态…

炒股进阶理论知识

学完前面的《从零开始学炒股》这样的入门课程后&#xff0c;你已經有了一个基本的框架&#xff0c;接下来需要做的是深化、拓展和建立自己的交易系统。以下是为你量身定制的后续学习路径和理论知识建议&#xff0c;分为几个核心模块&#xff1a;模块一&#xff1a;技术分析的深…

华为OD机试真题-跳马-OD统一考试(C卷)

题目描述: 马是象棋(包括中国象棋和国际象棋)中的棋子,走法是每步直一格再斜一格,即先横着或直着走一格,然后再斜着走一个对角线,可进可退,可越过河界,俗称“马走‘日’字。 给顶m行n列的棋盘(网格图),棋盘上只有有棋子象棋中的棋子“马”,并且每个棋子有等级之分,…

PyTorch 模型保存与加载 (速查版)

文章目录1. 推理用: 保存 & 加载权重 (最常见)2. 继续训练用: 保存 & 加载完整状态3. 微调用: 部分加载 (分类头不同等情况)1. 推理用: 保存 & 加载权重 (最常见) import torch import torch.nn as nnmodel nn.Linear(10, 2)# 保存权重 torch.save(model.state_d…

oneshape acad数据集 sam-dataset

Full Text Search - Hugging Face sketchai (Sketch AI)

0913刷题日记

今日计划10道1/10两眼一睁就是刷209. 长度最小的子数组target 396893380 超时头疼看下题解我的问题在于&#xff0c;中间有一个又写了一个遍历&#xff0c;思路和滑动窗口差不多&#xff0c;但是那个遍历就把时间倍数了。头疼还能做题&#xff0c;你很棒了,身体健康最重要。没…

【JAVA】网络编程

引言 在学习网络编程之前&#xff0c;我们编写的程序几乎都是“单机版”的——只能在本地运行&#xff0c;自娱自乐&#xff0c;无法与其他主机&#xff08;用户&#xff09;进行交互。 有些同学可能会产生误解&#xff1a;既然 Java 号称“一次编译&#xff0c;到处运…

HTML标签关系详解:构建网页的骨架结构

前言 在上一篇教程中&#xff0c;我们学习了HTML5的基本结构。今天&#xff0c;让我们深入探讨HTML标签之间的关系。理解HTML标签之间的关系对于构建结构清晰、语义明确的网页至关重要。就像在现实生活中&#xff0c;建筑物的各个部分需要按照一定的规则组合在一起一样&#x…

238 除自身以外数组的的乘积

我的解法&#xff08;没头绪&#xff0c;参考AI的思路&#xff09; 好奇怪啊&#xff0c;这个题目&#xff0c;没什么思路 题目的主要难点是&#xff0c;如何通过这个线性运算得出所有的乘积和&#xff0c;同时不适用除法。 问了下AI&#xff0c;这种题目我可以从什么方向入手&…

智能体:从技术架构到产业落地的深度解析

在人工智能技术从 “感知智能” 向 “认知智能” 跨越的关键阶段&#xff0c;智能体&#xff08;Intelligent Agent&#xff09;作为具备自主决策与环境交互能力的核心载体&#xff0c;正成为连接 AI 算法与产业应用的重要桥梁。不同于传统被动执行指令的软件系统&#xff0c;智…

MATLAB基于组合近似模型和IPSO-GA的全焊接球阀焊接工艺参数优化研究

引言与研究背景 全焊接球阀的重要性&#xff1a;广泛应用于石油、天然气、化工等长输管道和关键装置&#xff0c;其安全性、密封性和耐久性至关重要。阀体一旦发生焊接缺陷&#xff0c;可能导致灾难性后果。 焊接工艺的挑战&#xff1a;焊接是一个涉及电、热、力、冶金的复杂瞬…

EzRemove(ezremove.ai)评测与实操:5 秒在线抠图、支持批量与换底(电商/设计团队提效指南)

摘要&#xff1a;做主图、白底图、海报的小伙伴&#xff0c;经常被“抠图—换底—导出”这套流程折磨。EzRemove 是一个在线 AI 抠图工具&#xff0c;支持5 秒自动抠图、透明 PNG 导出、批量处理、背景替换与基础编辑&#xff0c;无需安装本地软件&#xff0c;适合电商商家、设…

RStudio 教程:以抑郁量表测评数据分析为例

R 语言是一种专为统计计算、数据分析和图形可视化而设计的编程语言&#xff0c;在学术界和工业界都备受青睐。RStudio是一款为 R 语言量身打造的集成开发环境&#xff08;IDE&#xff09;。它如同一个功能强大的指挥中心&#xff0c;能够将数据科学工作所需的一切&#xff1a;控…

Rupert Baines加入CSA Catapult董事会

英国半导体行业领军人物鲁珀特贝恩斯&#xff08;Rupert Baines&#xff09;正式出任英国化合物半导体应用公司&#xff08;CSA Catapult&#xff09;非执行董事&#xff0c;宛若一位经验丰富的航海家将为这艘科技旗舰指引航向。这位三次成功创业退出的科技企业家&#xff0c;将…

第七篇:识破“共因失效”——如何阻止汽车系统的“团灭”危机

想象一下这个场景&#xff1a; 你精心设计了一套双备份的刹车系统&#xff0c;就像给车装了两条独立的刹车线&#xff0c;心想&#xff1a;“这下总万无一失了吧&#xff01;”结果&#xff0c;一场寒潮来袭&#xff0c;两条刹车线因为同一个原因——低温&#xff0c;同时被冻住…