MUI Premium Data Grid工具栏图标显示异常及三项自定义需求求助

一、修正工具栏图标显示异常 #

你的代码同时使用了新版slots和旧版components配置指定工具栏，API冲突会导致图标渲染异常，另外需确保已安装@mui/icons-material依赖包（图标组件的依赖）。

修正后的代码：

<Grid item xs={12}>
  <DataGridPremium
    columns={columns}
    rows={rows}
    slots={{ toolbar: GridToolbar }}
    autoHeight
    checkboxSelection
  />
</Grid>

说明：移除冗余的components={{ Toolbar: GridToolbar }}配置，MUI v5+推荐用slots和slotProps替代旧版components相关API。

二、为工具栏项设置自定义图标 #

通过slotProps配置可替换导出、筛选、密度切换等默认按钮的图标：

1. 导入需要的自定义图标（示例用@mui/icons-material内置图标，也可使用自定义SVG）：

import ExportIcon from '@mui/icons-material/Export';
import FilterAltIcon from '@mui/icons-material/FilterAlt';
import ViewCompactIcon from '@mui/icons-material/ViewCompact';

2. 在DataGridPremium中配置slotProps：

<Grid item xs={12}>
  <DataGridPremium
    columns={columns}
    rows={rows}
    slots={{ toolbar: GridToolbar }}
    slotProps={{
      toolbar: {
        showQuickFilter: true,
        // 替换各功能按钮图标
        csvOptions: { icon: <ExportIcon /> },
        filterOptions: { icon: <FilterAltIcon /> },
        densityOptions: { icon: <ViewCompactIcon /> },
      },
    }}
    autoHeight
    checkboxSelection
  />
</Grid>

三、添加自定义工具栏选项 #

创建自定义工具栏组件，在默认GridToolbar基础上新增自定义功能：

1. 定义自定义工具栏组件：

import { GridToolbar, GridToolbarContainer } from '@mui/x-data-grid-premium';
import Button from '@mui/material/Button';
import RefreshIcon from '@mui/icons-material/Refresh';

const CustomGridToolbar = () => {
  const handleCustomAction = () => {
    // 自定义逻辑，比如刷新数据、触发弹窗等
    console.log('执行自定义工具栏操作');
  };

  return (
    <GridToolbarContainer>
      {/* 保留默认工具栏内容 */}
      <GridToolbar />
      {/* 添加自定义按钮 */}
      <Button
        variant="contained"
        startIcon={<RefreshIcon />}
        onClick={handleCustomAction}
        sx={{ ml: 2 }}
      >
        刷新数据
      </Button>
    </GridToolbarContainer>
  );
};

2. 在DataGridPremium中使用自定义工具栏：

<Grid item xs={12}>
  <DataGridPremium
    columns={columns}
    rows={rows}
    slots={{ toolbar: CustomGridToolbar }}
    autoHeight
    checkboxSelection
  />
</Grid>

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