如何将MUI DataGrid的GridToolbarColumnsButton切换开关改为复选框？

直接通过样式覆盖无法达成需求，因为GridToolbarColumnsButton默认使用的是Switch组件，要替换为复选框需要自定义列面板的内容组件，而非仅修改样式。以下是具体实现步骤：

1. 创建自定义列面板内容组件 #

利用MUI X提供的ColumnsPanelContent组件，通过renderToggle属性自定义每个列项的切换控件，将默认的Switch替换为Checkbox：

import { Checkbox, ListItem, ListItemText } from '@mui/material';
import { ColumnsPanelContent } from '@mui/x-data-grid';

const CustomColumnsPanelContent = (props) => {
  return (
    <ColumnsPanelContent
      {...props}
      renderToggle={(params) => (
        <ListItem disablePadding>
          <Checkbox
            checked={params.visible}
            onChange={(e) => params.onVisibilityChange(e.target.checked)}
            size="small" // 可选：调整复选框大小
          />
          <ListItemText primary={params.columnHeaderName} />
        </ListItem>
      )}
    />
  );
};

2. 在DataGrid中配置自定义组件 #

将自定义的CustomColumnsPanelContent通过componentsProps.panel传入DataGrid：

<DataGrid
  {...data}
  components={{ toolbar: CustomToolbar }}
  componentsProps={{
    panel: {
      columnsPanelContent: CustomColumnsPanelContent,
    },
  }}
/>

3. 可选：调整复选框样式 #

如果需要修改复选框的外观，直接在Checkbox组件上使用sx属性即可：

<Checkbox
  checked={params.visible}
  onChange={(e) => params.onVisibilityChange(e.target.checked)}
  size="small"
  sx={{
    '& .MuiSvgIcon-root': { fontSize: 20 },
    '&.Mui-checked': { color: '#1976d2' } // 自定义选中状态颜色
  }}
/>

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