如何修改MUI X DataGrid社区版的操作菜单图标？

当然可以修改，直接给GridActionsCellItem添加icon属性即可，社区版完全支持这个配置。

具体操作步骤：

• 先导入你需要的图标（比如Material UI官方图标库的组件，或者自定义的SVG组件）
• 给每个GridActionsCellItem传入icon属性，将图标组件作为值传入

修改后的代码示例如下：

// 先导入所需图标（以Material UI图标为例）
import AddIcon from '@mui/icons-material/Add';
import AssignmentTurnedInIcon from '@mui/icons-material/AssignmentTurnedIn';
import DeleteIcon from '@mui/icons-material/Delete';
import EditIcon from '@mui/icons-material/Edit';

const columns = [
  {
    field: "actions",
    type: "actions",
    width: 100,
    getActions: (cell) => [
      <GridActionsCellItem
        label={strings.addSome}
        onClick={() => openAddModal(cell.row)}
        showInMenu
        icon={<AddIcon />} // 自定义添加操作图标
      />,
      <GridActionsCellItem
        label={strings.pickSome}
        onClick={() => openPickModal(cell.row)}
        showInMenu
        icon={<AssignmentTurnedInIcon />} // 自定义选择操作图标
      />,
      <GridActionsCellItem
        label={strings.remove}
        onClick={() => openRemoveModal(cell.row)}
        showInMenu
        icon={<DeleteIcon />} // 自定义删除操作图标
      />,
      <GridActionsCellItem
        label={strings.modifyQty}
        onClick={renderComingSoon}
        showInMenu
        icon={<EditIcon />} // 自定义修改数量操作图标
      />,
    ],
  },
];

如果不想用Material UI自带图标，也可以传入自定义的React组件作为icon属性的值，比如自己编写的SVG组件或者其他UI库的图标组件都可以。

内容的提问来源于stack exchange，提问作者Islam Y-