Как сделать компонент Material UI Datagrid NoRowsOverlay интерактивным?

Question

Я хотел бы переопределить компонент NoRowsOverlay в DataGrid с моим настраиваемыми один, который использует среагировать-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 больше не работают. Замена GridOverlay с регулярным divтоже не работает. Компонент Dropzone работает до тех пор, пока отображается за пределами DataGrid. Любые идеи?

Answer 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>

Answer 2

Мне пришлось добавить классы z-index и pointer-events:

        <GridOverlay style={{ zIndex: 5, pointerEvents: 'all' }}>
    ...
  </GridOverlay>