MUI Data Grid单元格编辑功能在平板模式下无法使用求助

在响应式模式和手机尺寸下，DataGrid的数量单元格可正常编辑，但平板模式下编辑功能完全失效。

相关代码 #

<DataGrid
  rows={sortBy(this.props.formData?.orderItems, ["productCode"]) II [1}
  autoHeight
  columns={hls.columnsl}
  getRowId={(row) => row.orderItemId}
  processRowUpdate={(row) => this.processRowUpdate(row)}
  experimentalFeatures={{ newEditingApi: true }}
  pageSize={10}
  disableSelectionOnClick
  rowHeight={125}
  sx={{ textAlign: "center" }} 
/>

界面说明 #

• DataGrid表格：展示包含可编辑数量列的订单商品列表
• React配置界面：呈现组件相关配置细节
• UI布局界面：显示平板模式下的页面布局状态

可能的原因及解决方法 #

1. 列定义的响应式编辑权限配置错误 #

检查hls.columnsl中数量列的editable属性，是否在平板断点下被错误禁用。可通过动态函数控制编辑权限：

// 示例数量列定义
const quantityColumn = {
  field: 'quantity',
  headerName: '数量',
  editable: (params) => {
    const theme = useTheme();
    const isTablet = useMediaQuery(theme.breakpoints.only('tablet'));
    // 根据需求调整逻辑，确保平板模式下允许编辑
    return true;
  },
};

2. 平板模式下元素遮挡或交互被阻止 #

用浏览器开发者工具检查平板视图下，数量单元格是否被弹窗、遮罩、固定导航等元素覆盖，或是否存在pointer-events: none这类阻止点击的CSS样式。

3. 实验性编辑API的兼容性问题 #

当前启用的newEditingApi属于实验特性，可能在平板尺寸下存在未修复的bug。尝试移除该配置，切换到稳定版编辑API测试：

<DataGrid
  rows={sortBy(this.props.formData?.orderItems, ["productCode"]) || []}
  autoHeight
  columns={hls.columnsl}
  getRowId={(row) => row.orderItemId}
  processRowUpdate={(row) => this.processRowUpdate(row)}
  // 移除实验性特性配置
  // experimentalFeatures={{ newEditingApi: true }}
  pageSize={10}
  disableSelectionOnClick
  rowHeight={125}
  sx={{ textAlign: "center" }} 
/>

（注：同时修正了代码中的语法错误II [1}为|| []，避免潜在渲染问题）

4. 固定行高导致交互区域异常 #

平板模式下固定rowHeight={125}可能导致单元格交互触发区域异常。尝试移除固定行高，或根据断点动态调整：

import { useMediaQuery, useTheme } from '@mui/material';

// 组件内部获取断点状态
const theme = useTheme();
const isTablet = useMediaQuery(theme.breakpoints.only('tablet'));

// 在DataGrid中应用动态行高
<DataGrid
  rowHeight={isTablet ? 'auto' : 125}
  // 其他属性...
/>

内容的提问来源于stack exchange，提问作者İrem Kürekçi