当MUI数据网格中的行为空时，显示img

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

您可以定义一个新组件并覆盖MUI数据网格的noRowsOverlay插槽，如下所示：

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

<DataGrid
slots={{
noRowsOverlay: MyCustomNoRowsOverlay
}}

你可以看看这个沙箱，看看这个解决方案的实际工作示例。