解決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
英文地址,請注明出處:http://en.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;同時被凍住…