启用MUI DataGrid的checkboxSelection触发touchRippleRef警告求解决方案

问题场景 #

开启MUI DataGrid的checkboxSelection属性后，控制台弹出如下警告：

警告：React 无法识别 DOM 元素上的touchRippleRef属性。如果您有意将其作为自定义属性显示在 DOM 中，请改为小写拼写为touchrippleref。如果您不小心从父组件传递了它，请从 DOM 元素中移除它。

移除checkboxSelection属性后警告消失，组件代码及数据结构如下：

组件代码：

const columns = [
  { field: 'adset_budget', headerName: 'Adset Budget' },
  { field: 'spend', headerName: 'Spend', type: 'number' },
  { field: 'impressions', headerName: 'Impressions', type: 'number' },
  { field: 'revenue', headerName: 'Revenue', type: 'number' },
];

function DataTable({
  loading,
  metricsData,
}) {
  return (
    <Box sx={{ width: '100%', height: 1000 }}>
      <DataGrid
        checkboxSelection
        disableSelectionOnClick
        columns={columns}
        rows={metricsData}
        loading={loading}
      />
    </Box>
  );
}

数据结构：

[
  {
    "adset_budget": 8434.25,
    "spend": 1437.797094,
    "impressions": 283275,
    "clicks": 33652,
    "revenue": 1953.063728314,
    "id": "2172a7e8-130a"
  },
  {
    "adset_budget": 9434.89,
    "spend": 438.700094,
    "impressions": 573957,
    "clicks": 46365,
    "revenue": 2745.063728746,
    "id": "8972n0e8-987b"
  }
]

解决思路 #

• 优先升级/对齐MUI版本
  这个警告本质是MUI内部组件的属性传递bug——DataGrid的复选框组件在渲染时错误地把touchRippleRef传到了原生DOM元素上。建议检查@mui/material和@mui/x-data-grid的版本是否匹配，直接升级到最新稳定版，或者回退到已知无此问题的版本（比如v5.x的稳定分支），多数情况下官方已经修复这类属性泄漏问题。

• 自定义复选框组件覆盖默认实现
  如果升级版本无法解决，可以自定义表头的复选框组件，手动过滤掉touchRippleRef属性，避免它被传到DOM：

  import { Checkbox } from '@mui/material';
  
  const CustomCheckbox = (props) => {
    // 过滤掉touchRippleRef，只传递其他必要属性
    const { touchRippleRef, ...restProps } = props;
    return <Checkbox {...restProps} />;
  };
  
  // 在DataGrid中配置自定义组件
  <DataGrid
    checkboxSelection
    disableSelectionOnClick
    columns={columns}
    rows={metricsData}
    loading={loading}
    components={{
      Checkbox: CustomCheckbox,
    }}
  />
  

• 临时屏蔽警告（仅应急）
  要是暂时没法升级或修改组件，可以临时通过重写console.error屏蔽该警告，但这只是治标不治本，不推荐长期使用：

  import { useEffect } from 'react';
  
  function DataTable({ loading, metricsData }) {
    useEffect(() => {
      const originalError = console.error;
      console.error = (...args) => {
        // 过滤包含touchRippleRef的警告
        if (!args[0]?.includes('touchRippleRef')) {
          originalError.apply(console, args);
        }
      };
      // 组件卸载时恢复原console.error
      return () => console.error = originalError;
    }, []);
  
    return (
      <Box sx={{ width: '100%', height: 1000 }}>
        <DataGrid
          checkboxSelection
          disableSelectionOnClick
          columns={columns}
          rows={metricsData}
          loading={loading}
        />
      </Box>
    );
  }
  

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