如何修改MUI Datagrid中的导出标签

方法一：通过自定义Locale配置 #

直接利用MUI Datagrid的localeText属性覆盖默认导出文本，这是最简洁的实现方式：

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

// 自定义文本配置
const customLocale = {
  toolbarExportCSV: 'Export to CSV',
  // 如需修改Excel导出标签，可添加该行
  // toolbarExportExcel: 'Export to Excel',
};

export default function YourGridComponent() {
  return (
    <DataGrid
      columns={yourColumns}
      rows={yourRows}
      localeText={customLocale}
      // 其他网格属性
    />
  );
}

localeText是Datagrid用于自定义多语言或默认文本的核心配置，toolbarExportCSV对应CSV导出按钮的标签，直接替换为你需要的内容即可。

方法二：自定义导出工具栏组件 #

如果需要更灵活的控制（比如调整按钮样式、添加导出前逻辑），可以自定义导出按钮并替换默认工具栏：

import { DataGrid, GridToolbarExport, GridToolbarColumnsButton, GridToolbarFilterButton, GridToolbarDensitySelector } from '@mui/x-data-grid';

// 自定义导出按钮
const CustomExportButton = () => (
  <GridToolbarExport
    label="Export to CSV"
    csvOptions={{ fileName: 'custom-data.csv' }} // 可配置导出文件名
  />
);

export default function CustomToolbarGrid() {
  return (
    <DataGrid
      columns={yourColumns}
      rows={yourRows}
      components={{
        Toolbar: () => (
          <div style={{ display: 'flex', gap: '8px', padding: '16px' }}>
            {/* 保留默认工具栏的其他功能组件 */}
            <GridToolbarColumnsButton />
            <GridToolbarFilterButton />
            <GridToolbarDensitySelector />
            {/* 插入自定义导出按钮 */}
            <CustomExportButton />
          </div>
        ),
      }}
    />
  );
}

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