React Chakra UI Modal仅显示遮罩层无内容问题如何解决？

• 第一步：验证ChakraProvider全局配置
  检查项目入口文件（通常是main.tsx/index.tsx）是否将整个应用包裹在ChakraProvider组件内，缺少这个全局提供者会导致Chakra组件样式、定位逻辑异常，示例正确配置如下：

  import React from 'react'
  import ReactDOM from 'react-dom/client'
  import { ChakraProvider } from '@chakra-ui/react'
  import App from './App'
  
  ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
    <ChakraProvider>
      <App />
    </ChakraProvider>,
  )
  

• 第二步：检查DOM元素是否存在与样式冲突
  打开浏览器开发者工具的元素面板，搜索chakra-modal__content类名的节点：
  • 如果节点不存在：排查React版本兼容问题，Chakra UI v2要求React 18及以上版本，若使用低版本React请降级Chakra UI到v1版本
  • 如果节点存在但不可见：依次检查以下样式属性
    • 查看z-index计算值：ModalOverlay默认z-index为1400，ModalContent默认z-index为1401，若被自定义全局样式覆盖可手动给ModalContent指定zIndex={9999}临时测试
    • 检查祖先元素是否存在transform、perspective、filter属性：上述属性会导致fixed定位的ModalContent相对于该祖先元素而非视口定位，若存在请移除对应属性，或给Modal指定portalProps挂载到独立节点
    • 检查是否有全局样式将ModalContent设置为opacity: 0、display: none或偏移到视口外
    • 排查主题配色冲突：如果开启了暗黑模式，ModalContent背景色可能和遮罩层接近，可手动指定bg="white"测试
• 第三步：验证Portal挂载配置
  若自定义了Modal的container属性指定挂载节点，请检查该节点未被设置overflow: hidden、visibility: hidden等隐藏属性，若无特殊需求可移除自定义container配置，使用默认的body挂载即可
• 第四步：临时最简测试
  可先给ModalContent添加强制可见的行内属性测试效果：

  <ModalContent zIndex={9999} bg="white" top="50%" left="50%" transform="translate(-50%, -50%)">
  

  若添加后可正常显示，再逐步排查样式覆盖的来源即可

内容的提问来源于stack exchange，提问作者Atiq Ur Rehman