不生效原因
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;
}
注:本人前端小白 ,如有不對的地方還請多多指教