Modal宽度设不生效是因为maxWidth优先级高于width；应优先调整maxWidth，或用媒体查询、动态计算实现响应式，同时注意子元素排版和第三方库样式覆盖问题。
Modal 宽度设不生效？检查 width 和 maxWidth 的优先级
ant design、element plus 等主流 ui 库的 modal 组件默认用 maxwidth 控制宽度，直接设 width 常被忽略。这是因为内部样式用了 max-width: 90% + width: auto 的组合，width 值再大也顶不过 maxwidth 的限制。
实操建议：
- Ant Design：优先用
width属性（它实际会转为style.width），但若值小于默认maxWidth（520px），需同时传style={{ maxWidth: '800px' }} - Element Plus：
width是字符串类型，必须带单位，如width="800px"；设为数字（如800）会被忽略 - 原生 CSS 实现 Modal 时，别只改
width，要同步重置max-width，否则在小屏下可能突然收缩
响应式 Modal 宽度：用媒体查询还是动态计算？
固定像素宽度在平板或横屏手机上容易溢出，但用百分比又可能在桌面端太窄。纯 CSS 媒体查询写法简单，但切换临界点生硬；JavaScript 动态计算更灵活，却增加运行时开销和 SSR 不兼容风险。
实操建议：
- 推荐先用 CSS 媒体查询兜底：
@media (min-width: 768px) { .my-modal { width: 700px; } } - 需要精确适配内容高度/宽度时，用
useEffect+getBoundingClientRect()获取容器尺寸，再设style.width，但务必加防抖 - Next.js 或 SSR 场景下，避免首次渲染就依赖
window.innerWidth，可用useEffect延迟到客户端执行
自适应内容撑开 Modal？小心 white-space 和 table-layout
Modal 内部放长文本、表格或代码块时，常出现横向滚动条消失、文字强制换行、或整个弹窗被撑得极宽——根本原因不是 Modal 本身，而是子元素的排版行为未约束。
实操建议：
- 长文本容器加
style={{ wordBreak: 'break-word', overflowWrap: 'break-word' }} - 表格类内容外层包一层
div并设style={{ overflowX: 'auto' }}，表内用table-layout: fixed防止列宽失控 - 避免在 Modal body 里用
display: flex+flex-wrap: nowrap组合，这会让子项拒绝换行，直接撑宽父容器
第三方库 Modal 的宽度劫持：比如 react-modal 或 bootstrap-modal
这些库往往把宽度逻辑写死在内联 style 或全局 class 里，你传的 style 或 className 可能被覆盖。尤其 react-modal 默认用 content 类名绑定 maxWidth: 75%，不手动覆盖就无效。
实操建议：
-
react-modal：必须用overlayClassName和contentClassName分别控制遮罩和内容区，并在 CSS 中提高选择器权重，例如.my-modal-content { width: 90vw !important; max-width: 1000px !important; } -
bootstrap-modal：改.modal-dialog的max-width，但注意 v5 后加了modal-lg/modal-xl类，它们有固定断点，直接覆盖更稳妥 - 所有第三方 Modal，打开前用浏览器 DevTools 检查最终生效的
width和max-width计算来源，比猜配置快得多
最麻烦的其实是嵌套场景：比如 Modal 里再开 Modal，或者 Modal 被 Portal 到 body 下后又被其他样式污染。这时候靠单个属性或 class 很难搞定，得一层层 inspect computed style，看哪个规则在打架。
