如何自定义MUI Datagrid的GridToolbar添加自定义按钮和文本

MUI DataGrid原生支持工具栏自定义，不需要hack源码，直接通过官方暴露的slots配置就能实现添加自定义按钮、文本的需求，有两种常用实现方案：

• 方案一：保留默认工具栏功能，追加自定义内容
  如果你需要保留默认的列显隐控制、密度调整、导出、快速筛选这些原生工具栏按钮，只额外加自己的内容，可以封装自定义工具栏组件嵌套默认GridToolbar，再插入自定义元素即可，示例代码：

import { DataGrid, GridToolbar, GridToolbarContainer } from '@mui/x-data-grid';
import { Button, Typography } from '@mui/material';

const CustomToolbar = () => {
  return (
    <GridToolbarContainer>
      {/* 加载默认工具栏的所有原生功能 */}
      <GridToolbar />
      {/* 插入自定义文本，可自行调整样式、间距 */}
      <Typography variant="body2" sx={{ mx: 2 }}>
        自定义提示文本
      </Typography>
      {/* 插入自定义按钮，绑定对应业务逻辑 */}
      <Button
        size="small"
        variant="outlined"
        onClick={() => {
          // 这里写按钮点击后的业务逻辑
        }}
      >
        自定义操作
      </Button>
    </GridToolbarContainer>
  );
};

// DataGrid组件中传入slots配置替换工具栏
<DataGrid
  rows={yourTableData}
  columns={yourColumnsConfig}
  slots={{
    toolbar: CustomToolbar
  }}
/>

• 方案二：完全自定义工具栏结构
  如果你不需要默认工具栏的任何原生按钮，要完全自己控制工具栏的所有内容，可以直接在GridToolbarContainer容器内编写自己需要的所有文本、按钮元素，不需要嵌套默认GridToolbar组件即可。

提示：GridToolbarContainer是官方提供的工具栏专用布局容器，自带和原生工具栏一致的内边距、flex布局、元素间距规则，能保证自定义内容和DataGrid整体视觉风格统一，不需要额外调整布局样式。

附参考效果（即你提到的需要自定义的目标工具栏）：

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