Material UI：如何禁用DataGrid组件的底部滚动条？

可以试试以下几种方法：

• 检查容器高度限制：确保DataGrid的父元素没有设置固定高度或overflow: auto这类属性，autoHeight需要父容器能自适应高度才能正常生效。
• 通过CSS强制隐藏滚动条：自定义样式覆盖DataGrid的滚动行为，比如：

  import { DataGrid } from '@mui/x-data-grid';
  import { styled } from '@mui/material/styles';
  
  const StyledDataGrid = styled(DataGrid)`
    /* 隐藏所有滚动条 */
    & .MuiDataGrid-main {
      overflow: hidden !important;
    }
    /* 仅隐藏底部横向滚动条 */
    & .MuiDataGrid-window {
      overflow-x: hidden !important;
    }
  `;
  
  // 使用自定义组件
  <StyledDataGrid
      rows={rows}
      columns={columns}
      autoHeight={true}
      rowsPerPageOptions={[5]}
      pageSize={5}
      disableSelectionOnClick
      density="compact"
      hideFooterPagination={true}
      hideFooter={true}
      showCellRightBorder={true}
      showColumnRightBorder={true}
  />
  

• 调整列宽避免溢出：如果是列总宽度超出容器导致的横向滚动条，可以给列设置flex: 1让列自适应容器宽度，或者手动设置合适的width属性，避免列宽总和超过容器宽度。

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