Material UI：如何禁用数据网格中的滚动条？

Question

如何禁用底部的滚动条？

欲了解更多信息，我已经尝试过

autoPageSize

，但没有成功。 autoPageSize 文档链接

import { DataGrid } from '@mui/x-data-grid';

<DataGrid
    rows={rows}
    columns={columns}
    autoHeight={true}
    rowsPerPageOptions={[5]}
    pageSize={5}
    disableSelectionOnClick
    density="compact"
    hideFooterPagination={true}
    hideFooter={true}
    showCellRightBorder={true}
    showColumnRightBorder={true}
/>

Answer 1

我通过在表格样式中添加 "'& .MuiDataGrid-virtualScroller::-webkit-scrollbar': {display: 'none' }" 来删除滚动条。

<DataGrid
        rows={navigate.rows}
        columns={columns}
        getRowHeight={() => 'auto'}
        sx={{ '& .MuiDataGrid-row': { marginTop: 1, marginBottom: 1 }, '& .coloured': { textAlign: 'center', color: '#7181AD' },'& .MuiDataGrid-virtualScroller::-webkit-scrollbar': {display: 'none' } }}/>

Answer 2

我已经测试了您的代码，即使对我来说该表的底部没有滚动条，我认为您可以尝试将“hideScrollbar={true}”添加到 DataGrid 选项中。这应该会从 DataGrid 组件底部删除滚动条。

<DataGrid
     rows={rows}
    columns={columns}
    autoHeight={true}
    rowsPerPageOptions={[5]}
    pageSize={5}
    disableSelectionOnClick
    density="compact"
    hideFooterPagination={true}
    hideFooter={true}
    showCellRightBorder={true}
    showColumnRightBorder={true}
    hideScrollbar={true}
/>

我想到的第二个选项是通过给 DataGrid 一个像“myTable”这样的类名来使用 CSS 删除它，并在 CSS 中执行以下操作：

.myTable::-webkit-scrollbar {
  display: none;
}

如果此后问题仍未解决，请检查您的附加 CSS，或者您可以在此处上传；我很乐意帮助您。

为了记录，我在此处测试了您的代码：https://playcode.io/1191293

这也是实时预览：https://1191293.playcode.io/

希望这对您有帮助，如果您需要其他任何信息，请告诉我。