如何在MUI DataGrid Pro组件中点击行后显示自定义组件？

要实现点击行展开全宽自定义详情的效果，直接用DataGrid内置的detailPanel属性就能搞定，以下是具体实现步骤和代码：

核心实现思路 #

利用DataGrid的detailPanel配置自定义展开内容，同时设置点击整行触发展开，并通过样式覆盖让详情区域占满整行宽度。

1. 基础配置与自定义详情组件 #

先定义表格列和数据，然后写一个接收行数据的详情组件，用来展示额外信息：

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

// 表格列定义
const columns: GridColDef[] = [
  { field: 'id', headerName: 'ID', width: 70 },
  { field: 'name', headerName: '姓名', width: 130 },
  { field: 'age', headerName: '年龄', width: 90 },
];

// 表格数据（包含需要展开的额外字段）
const rows = [
  { id: 1, name: '张三', age: 25, address: '北京市朝阳区', phone: '13800138000' },
  { id: 2, name: '李四', age: 30, address: '上海市浦东新区', phone: '13900139000' },
];

// 自定义详情面板组件
const CustomDetailPanel = ({ row }: GridDetailPanelParams) => {
  return (
    <div style={{ padding: '16px', width: '100%', backgroundColor: '#f5f5f5' }}>
      <div><strong>用户详情</strong></div>
      <div>地址：{row.address}</div>
      <div>联系电话：{row.phone}</div>
      <div>备注：可根据业务需求添加任意自定义内容，比如多行文本、表单甚至其他组件</div>
    </div>
  );
};

2. 配置DataGrid实现点击行展开 #

在DataGrid组件中配置detailPanel、点击触发模式，并通过sx覆盖默认样式，确保详情区域全宽显示：

<DataGrid
  rows={rows}
  columns={columns}
  // 配置详情面板
  detailPanel={[{
    render: (params) => <CustomDetailPanel {...params} />,
  }]}
  // 设置点击整行触发展开/收起
  detailPanelClickMode="row"
  // 覆盖默认样式，让详情区域占满全宽
  sx={{
    '& .MuiDataGrid-detailPanel': {
      border: 'none',
      width: '100%',
    },
    '& .MuiDataGrid-detailPanelCell': {
      padding: 0,
    },
  }}
/>

关键说明 #

• detailPanelClickMode="row"：将展开触发方式从默认的行首图标改为点击整行，符合需求
• 样式覆盖：默认的详情面板有内边距和宽度限制，通过sx里的CSS选择器去除这些限制，让自定义内容占满整行
• 自定义详情组件：可以完全自由定制内容，支持展示任意字段、组件，适配不同业务场景

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