如何使 Material UI Datagrid NoRowsOverlay 组件可点击？答案

【问题标题】：How do I make Material UI Datagrid NoRowsOverlay component clickable?如何使 Material UI Datagrid NoRowsOverlay 组件可点击？
【发布时间】：2021-11-10 11:27:44
【问题描述】：

我想用我的自定义组件覆盖 Datagrid 的 NoRowsOverlay 组件，它使用 react-dropzone：

<GridOverlay
  {...getRootProps()}
  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>

我像这样覆盖组件：

<DataGrid
  autoHeight
  columns={getColumns(classes)}
  components={{
    NoRowsOverlay: DropZone
  }}
  disableColumnMenu
  disableSelectionOnClick
  hideFooter
  rows={devices}
/>

我无法弄清楚为什么拖放和单击 dropzone 不再起作用。用普通的div 替换GridOverlay 也不起作用。只要在DataGrid 之外渲染，Dropzone 组件就可以工作。有什么想法吗？

【问题讨论】：

标签： reactjs material-ui react-dropzone material-ui-x

【解决方案1】：

我最近遇到了类似的问题，我在自定义叠加层中放置了一个按钮，但它无法点击。

对我来说问题的原因是 DataGrid 位于模态框内，导致每当覆盖处于活动状态时按钮都无法点击。但是，我通过给我的覆盖组件一个更高的z-index 来解决这个问题。

    <GridOverlay {...getRootProps()}
          style={{ zIndex: 5}}
          //Or add it to your classes.zone styles
          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>

【讨论】：