React表格单元格内嵌Modal全屏覆盖，求排查原因

这个问题我之前在项目里也碰到过，核心原因基本都和Modal的挂载位置、定位规则或者组件默认样式有关，咱们具体分析下：

常见原因 #

• Modal默认挂载到全局根节点：绝大多数第三方Modal组件（比如Material-UI、Ant Design的Modal）为了避免被父容器的overflow/z-index限制，默认会把Modal元素挂载到document.body或者项目的根容器（比如#root）下，而不是你写的单元格<div>里面。这样Modal就脱离了表格单元格的约束，自然会铺满整个屏幕。
• Modal自带全屏样式：有些Modal组件默认开启了全屏模式，或者自带width: 100vw、height: 100vh这类全屏样式，不管父容器是谁，都会占满整个视口。
• 表格单元格的样式限制：表格单元格通常是display: table-cell，本身不支持作为绝对定位元素的父容器，如果Modal是绝对定位，会向上找第一个position: relative/absolute/fixed的父元素，要是找到的是body，就会全屏显示。

对应的解决办法 #

1. 让Modal挂载到单元格容器内（针对第三方组件） #

如果用的是第三方Modal库，一般会提供指定挂载容器的属性，比如MUI的Modal有container prop，Ant Design的Modal有getContainer属性。你可以把Modal挂载到单元格的<div>里：

Header: '', 
Cell: row => { 
  const cellRef = React.useRef(null);
  return ( 
    <div ref={cellRef}> 
      <Modal 
        open={this.state.open} 
        onClose={this.onCloseModal}
        container={cellRef.current} // 指定挂载到当前单元格的div
        style={{ position: 'absolute' }}
      > 
        <h2>Simple centered modal</h2> 
      </Modal> 
    </div> 
  ) 
}

2. 自定义Modal的定位样式 #

如果是自己写的Modal或者第三方组件支持自定义样式，给Modal设置相对父容器的绝对定位，同时给单元格的<div>加上position: relative，让Modal以它为参考：

Header: '', 
Cell: row => { 
  return ( 
    <div style={{ position: 'relative' }}> {/* 给父容器加相对定位 */}
      <Modal 
        open={this.state.open} 
        onClose={this.onCloseModal}
        style={{
          position: 'absolute',
          top: '10px',
          left: '10px',
          width: '300px',
          height: '200px',
          zIndex: 9999,
          background: '#fff',
          padding: '20px'
        }}
      > 
        <h2>Simple centered modal</h2> 
      </Modal> 
    </div> 
  ) 
}

3. 关闭Modal的全屏配置 #

检查下你用的Modal组件有没有fullScreen这类开关属性，如果有，确保把它设为false：

<Modal 
  open={this.state.open} 
  onClose={this.onCloseModal}
  fullScreen={false} // 关闭全屏模式
> 
  <h2>Simple centered modal</h2> 
</Modal>

内容的提问来源于stack exchange，提问作者Parameswar