我如何使材料UI Datagrid norowoverlay组件可点击?

Question

我想用我的自定义组件覆盖Datagrid的norowoverlay组件，它使用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也行不通。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>