如何移除Material UI DataGrid组件中的水平滚动条？

以下是针对你的代码，解决水平滚动条问题的具体方案：

方法1：直接隐藏滚动条 #

通过DataGrid自带的scrollbarVisibility属性隐藏水平滚动条，适合确认列内容不会溢出容器的场景：

<DataGrid
  rows={rows}
  columns={columns}
  getRowId={() => generateRandom()}
  initialState={{
    pagination: { paginationModel: { pageSize: 25 } }
  }}
  pageSizeOptions={[25, 50, 75, 100]}
  scrollbarVisibility="hidden" // 新增该属性
/>

方法2：优化列配置与容器宽度 #

确保列宽自适应且内容不溢出，同时让DataGrid占满父容器宽度：

1. 给列添加最小宽度限制和文本截断样式，避免内容撑大列宽：

const columns = [
  { 
    field: 'fileName', 
    headerName: 'File Name', 
    flex: 2, 
    headerClassName: 'table-header',
    minWidth: 200,
    renderCell: (params) => (
      <div style={{ whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>
        {params.value}
      </div>
    )
  },
  { 
    field: 'status', 
    headerName: 'Status', 
    renderCell: RenderBadge, 
    flex: 1, 
    headerClassName: 'table-header',
    minWidth: 120
  },
  { 
    field: 'reason', 
    headerName: 'Reason', 
    flex: 1, 
    headerClassName: 'table-header',
    minWidth: 120,
    renderCell: (params) => (
      <div style={{ whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>
        {params.value}
      </div>
    )
  }
];

2. 给DataGrid设置父容器宽度，确保表格能自适应容器：

<div style={{ width: '100%' }}>
  <DataGrid
    rows={rows}
    columns={columns}
    getRowId={() => generateRandom()}
    initialState={{
      pagination: { paginationModel: { pageSize: 25 } }
    }}
    pageSizeOptions={[25, 50, 75, 100]}
  />
</div>

方法3：通过CSS强制隐藏滚动条 #

如果上述方法无效，可通过自定义CSS隐藏水平滚动条：

<DataGrid
  rows={rows}
  columns={columns}
  getRowId={() => generateRandom()}
  initialState={{
    pagination: { paginationModel: { pageSize: 25 } }
  }}
  pageSizeOptions={[25, 50, 75, 100]}
  sx={{
    '& .MuiDataGrid-horizontalScrollbar': {
      display: 'none'
    }
  }}
/>

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