如何让MUI X Data Grid的NoRowsOverlay组件可点击并集成react-dropzone？

问题原因 #

MUI X DataGrid 内置的NoRowsOverlay容器默认配置了pointer-events: none的CSS属性，作用是禁止静态提示层接收任何交互事件，该属性会拦截所有点击、拖放事件的触发，这就是你的react-dropzone逻辑在DataGrid外部运行正常、放在Overlay内就失效的核心原因。哪怕你把内部的GridOverlay替换为普通div，父级Overlay容器的默认样式规则依然会阻止事件传递。

解决方案 #

只需要在你的自定义DropZone组件的根元素上强制添加pointer-events: auto的样式，覆盖DataGrid的默认规则即可，修改后的代码参考：

<GridOverlay
  {...getRootProps()}
  {/* 新增该行样式，也可以写入classes.zone对应的CSS规则中 */}
  style={{ pointerEvents: 'auto' }}
  className={clsx(classes.zone, {
    [classes.valid]: isDragAccept,
    [classes.invalid]: isDragReject
  })}
>
  <input {...getInputProps()} />
  {isDragActive
    ? (
      <Typography variant='h6'>
        {isDragAccept ? 'Drop the file here.' : 'Invalid file type.'}
      </Typography>
      )
    : (
      <Typography variant='h6'>
        Drop CSV file here or click to upload.
      </Typography>
      )}
</GridOverlay>

修改后拖放和点击上传功能即可正常生效。

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