MUI X Data Grid自定义NoResultsOverlay组件点击与截断问题求助

1. 修复覆盖层按钮无法点击问题 #

覆盖层容器为绝对定位但未设置z-index，导致按钮被其他元素遮挡，可通过两种方式设置：

方式一：通过componentsProps传递样式 #

直接在DataGrid的componentsProps中为对应覆盖层组件添加z-index：

<DataGrid
  // 其他配置项
  componentsProps={{
    noRowsOverlay: {
      sx: { zIndex: 1 }
    },
    noResultsOverlay: {
      sx: { zIndex: 1 }
    }
  }}
/>

利用MUI的sx属性直接设置层级，确保按钮处于可点击的上层。

方式二：全局CSS类名覆盖 #

针对MUI内置的覆盖层类名设置样式：

.MuiDataGrid-noRowsOverlay, .MuiDataGrid-noResultsOverlay {
  z-index: 1 !important;
}

若存在样式优先级冲突，添加!important确保生效。

2. 修复autoHeight模式下覆盖层被截断问题 #

当DataGrid设置autoHeight时，容器高度随内容自适应，需调整容器或覆盖层布局：

方式一：设置DataGrid容器最小高度 #

给DataGrid添加最小高度，确保覆盖层有足够空间显示：

<DataGrid
  autoHeight
  sx={{
    position: 'relative',
    minHeight: '200px' // 根据业务需求调整高度值
  }}
  // 其他配置项
/>

方式二：自定义覆盖层组件时优化布局 #

自定义覆盖层时，通过flex布局确保内容自适应容器，同时直接设置z-index：

const CustomNoRowsOverlay = () => (
  <div style={{
    position: 'absolute',
    inset: 0,
    display: 'flex',
    flexDirection: 'column',
    justifyContent: 'center',
    alignItems: 'center',
    zIndex: 1
  }}>
    <Typography>No rows found</Typography>
    <Button variant="contained">Add Row</Button>
  </div>
);

// 在DataGrid中配置自定义组件
<DataGrid
  components={{ NoRowsOverlay: CustomNoRowsOverlay }}
  autoHeight
  // 其他配置项
/>

内容的提问来源于stack exchange，提问作者sgm