如何修改Material UI Datagrid组件的默认复选框图标？

核心配置方法 #

MUI Datagrid 提供了插槽能力直接替换内置复选框组件，你只需要在 Datagrid 组件上配置slots参数即可生效，核心逻辑如下：

1. 确保已开启checkboxSelection属性，启用复选框选择列
2. 在slots中指定checkbox为你已经封装好的圆形复选框组件
3. 可选通过slotProps给自定义复选框透传额外参数

完整示例代码 #

import { DataGrid } from '@mui/x-data-grid';
// 引入你已经封装完成的圆形复选框组件
import RoundCheckbox from './your-custom-round-checkbox';

export default function CustomCheckboxGrid() {
  // 你的表格行、列配置
  const rows = [
    { id: 1, name: '示例数据1' },
    { id: 2, name: '示例数据2' },
    { id: 3, name: '示例数据3' },
  ];
  const columns = [
    { field: 'name', headerName: '名称', width: 150 },
  ];

  return (
    <div style={{ height: 400, width: '100%' }}>
      <DataGrid
        rows={rows}
        columns={columns}
        // 必须开启，否则不会渲染复选框列
        checkboxSelection
        // 替换默认复选框为自定义圆形组件
        slots={{
          checkbox: RoundCheckbox,
        }}
        // 如需给自定义复选框传额外参数，可通过slotProps配置
        slotProps={{
          checkbox: {
            size: 'small',
            color: 'primary',
          }
        }}
      />
    </div>
  );
}

常见失效原因排查 #

• 自定义组件未透传默认属性：Datagrid会自动给复选框传递checked、onChange、indeterminate（全选半选状态）等核心属性，你的自定义复选框组件必须透传这些属性到内部的复选框DOM节点，不能拦截，否则会出现状态不更新、无法选中的问题
• 版本兼容性问题：如果你使用的是MUI X v5早期版本，插槽配置项为components而非slots，对应传参项为componentsProps，写法如下：

// MUI X v5 早期版本兼容写法
<DataGrid
  checkboxSelection
  components={{
    Checkbox: RoundCheckbox,
  }}
  componentsProps={{
    checkbox: {
      // 透传参数
    }
  }}
/>

实现效果参考 #

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