如何为MUI X Data Grid添加标题？原生实现方法咨询

当然有原生实现方案，不用额外嵌套div，直接利用DataGrid的内置插槽就能搞定，正好满足你要在列标题上方、组件边框下方加居中标题的需求，给你两种可行的方式：

方式一：自定义Toolbar组件（最简方案） #

MIT版本的DataGrid自带Toolbar插槽，默认会渲染筛选、导出等功能，但你可以完全自定义它的内容，用来放标题：

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

// 自定义标题Toolbar
const GridTitleToolbar = () => (
  <div style={{ 
    padding: '8px 16px', 
    textAlign: 'center', 
    fontSize: '1.2rem', 
    fontWeight: 500,
    borderBottom: '1px solid rgba(224, 224, 224, 1)' // 和列标题的分隔线对齐
  }}>
    我的数据表格标题
  </div>
);

// 使用DataGrid时替换默认Toolbar
export default function MyDataGrid() {
  return (
    <DataGrid
      rows={yourRowsData}
      columns={yourColumnsConfig}
      components={{ Toolbar: GridTitleToolbar }}
      sx={{ border: 1, borderColor: 'divider' }} // 保留组件自身边框
    />
  );
}

方式二：带自定义组件的标题 #

如果需要在标题里加图标、按钮这类自定义元素，直接在Toolbar组件里扩展即可：

import { DataGrid } from '@mui/x-data-grid';
import { IconButton, Typography } from '@mui/material';
import RefreshIcon from '@mui/icons-material/Refresh';

const CustomTitleToolbar = () => (
  <div style={{ 
    display: 'flex', 
    justifyContent: 'center', 
    alignItems: 'center', 
    gap: '8px', 
    padding: '8px 16px',
    borderBottom: '1px solid rgba(224, 224, 224, 1)'
  }}>
    <Typography variant="h6">用户数据列表</Typography>
    <IconButton size="small">
      <RefreshIcon />
    </IconButton>
  </div>
);

export default function MyDataGrid() {
  return (
    <DataGrid
      rows={yourRowsData}
      columns={yourColumnsConfig}
      components={{ Toolbar: CustomTitleToolbar }}
      sx={{ border: 1, borderColor: 'divider' }}
    />
  );
}

注意点 #

• 这种方式的标题是DataGrid内部的一部分，会自动继承组件的边框和布局，不需要额外移除组件边框再嵌套div
• 如果还需要保留默认的Toolbar功能（比如筛选、导出），可以在自定义Toolbar里引入GridToolbar组件，把标题和默认元素结合起来：

  import { GridToolbar } from '@mui/x-data-grid';
  
  const TitleWithDefaultToolbar = () => (
    <div>
      <div style={{ textAlign: 'center', padding: '8px', borderBottom: '1px solid rgba(224,224,224,1)' }}>
        带默认功能的表格标题
      </div>
      <GridToolbar />
    </div>
  );
  

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