React MUI DataGrid：如何禁用GridToolbarExport中的菜单？

你遇到的问题根源在于GridToolbarExport本质是一个下拉菜单容器组件，即便仅保留CSV导出选项，它仍会维持子菜单结构，不会直接触发下载。要实现点击主按钮直接导出CSV，有两种简单可行的方案：

方案1：使用专用的GridExportButton组件 #

直接将GridToolbarExport替换为MUI提供的GridExportButton——这是专门用于CSV导出的按钮组件，点击后会直接触发导出动作：

import { GridExportButton } from '@mui/x-data-grid';

const CustomToolbar = (props: any) => {
  const currentDate = new Date();
  const formattedDate = currentDate.toISOString().slice(0, 10);
  const formattedTime = currentDate.toISOString().slice(11, 19);
  const fileName = `List-${formattedDate}-${formattedTime}.csv`;

  const csvOptions = {
    allColumns: true,
    fileName: fileName,
    delimiter: ";",
    utf8WithBom: true,
  };

  return (
    <div>
      <div style={{ marginRight: "auto" }}>
        <GridExportButton
          csvOptions={csvOptions}
          label="Export as CSV" // 设置按钮显示文本
        />
      </div>
    </div>
  );
};

方案2：手动调用API触发导出 #

通过useGridApiRef获取DataGrid的实例API，自定义按钮点击事件直接调用导出方法，灵活性更高：

import { useGridApiRef } from '@mui/x-data-grid';
import { Button } from '@mui/material'; // 可选，复用MUI Button样式

const CustomToolbar = () => {
  const apiRef = useGridApiRef();
  const currentDate = new Date();
  const formattedDate = currentDate.toISOString().slice(0, 10);
  const formattedTime = currentDate.toISOString().slice(11, 19);
  const fileName = `List-${formattedDate}-${formattedTime}.csv`;

  const handleExport = () => {
    apiRef.current.exportDataAsCsv({
      allColumns: true,
      fileName: fileName,
      delimiter: ";",
      utf8WithBom: true,
    });
  };

  return (
    <div>
      <div style={{ marginRight: "auto" }}>
        <Button onClick={handleExport} variant="contained">
          Export as CSV
        </Button>
      </div>
    </div>
  );
};

补充说明 #

• 确保你的MUI X DataGrid版本为v5及以上，GridExportButton在该版本后正式提供
• 若需要严格匹配原工具栏按钮的样式，可参考GridToolbarExport的默认className为自定义按钮设置样式

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