MUI 数据网格中行为空时显示图像

Question

我正在使用带有 React 的 MUI V.5。 当行为空时（当用户在网格中搜索产品并且找不到任何结果时），我想在网格中显示图像。 但我不知道如何访问这部分

sin filas 

（img参考）

      {products ? (
        <Box component="div" style={{ width: '100%' }}>
          <DataGrid
            rows={rows}
            columns={columns}
            checkboxSelection={true}
            autoHeight
            density="comfortable"
          />
        </Box>
      ) : (
        <div>Loading</div>
      )}
    </>

Answer 1

您可以像这样定义一个新组件和 override

noRowsOverlay

MUI 数据网格槽：

const MyCustomNoRowsOverlay = () => (
  <img src="/no-items-found.jpg" alt="no-item" />
);


<DataGrid
    slots={{
        noRowsOverlay: MyCustomNoRowsOverlay
    }}

您可以查看 this StackBlitz，了解此解决方案的实时工作示例。