如何解决Material UI React DataGrid列宽无法调整的问题？

以下是几个针对性的排查和修复方案：

• 确认依赖版本
  确保你安装的是@mui/x-data-grid（社区版）或@mui/x-data-grid-pro（专业版）的最新稳定版本。旧版本可能存在列宽调整的兼容性问题，执行命令升级：

  npm update @mui/x-data-grid
  # 或使用yarn
  yarn upgrade @mui/x-data-grid
  

• 排查样式冲突
  检查DataGrid的父容器或全局CSS是否覆盖了表头的resize手柄样式。避免给父Box设置overflow: hidden，这会遮挡调整手柄。可以给容器添加相对定位确保手柄可见：

  <Box sx={{ height: 400, width: '100%', position: 'relative' }}>
    <DataGrid
      rows={rows}
      columns={columns}
      disableColumnResize={false}
    />
  </Box>
  

• 简化配置排查干扰
  暂时移除selectionModel、onRowClick等非核心属性，先测试基础功能是否正常。如果简化后能调整列宽，再逐步加回其他属性定位冲突点：

  return (
    <Box m="1.5rem 2.5rem">
      <Typography variant="h4">Reservation List</Typography>
      <Box style={{ height: 400, width: "100%" }}>
        <DataGrid
          rows={rows}
          columns={columns}
          pageSize={5}
          disableColumnResize={false}
        />
      </Box>
    </Box>
  )
  

• 检查列配置
  确保所有列都没有手动设置resizable: false（默认值为true），如果某列单独禁用调整，会导致该列无法拖动：

  // 错误配置（禁用列调整）
  { field: "id", headerName: "#", width: 90, resizable: false }
  // 正确配置（保留默认可调整）
  { field: "id", headerName: "#", width: 90 }
  

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