React TS中如何移除MUI v5 DataGrid的列表头？

你之前的CSS写法有两个问题：一是display: hidden是无效的CSS属性，正确的隐藏应该用display: none；二是只隐藏表头元素还不够，DataGrid的顶部容器默认有高度和间距，需要一起重置才能彻底消除空白。

给你两种可行的实现方式：

方式一：直接用sx属性（推荐） #

在DataGrid组件上通过sx属性覆盖样式：

<DataGrid
  sx={{
    // 隐藏表头容器
    '& .MuiDataGrid-columnHeaders': {
      display: 'none',
    },
    // 隐藏表头分隔线（如果存在）
    '& .MuiDataGrid-columnHeaderSeparator': {
      display: 'none',
    },
    // 重置顶部容器高度，消除空白
    '& .MuiDataGrid-topContainer': {
      height: 0,
      overflow: 'hidden',
    },
    // 移除主内容区的顶部margin
    '& .MuiDataGrid-main': {
      marginTop: 0,
    }
  }}
  // 你的其他配置项，比如rows、columns等
/>

方式二：用styled组件封装 #

如果需要多处使用无表头的DataGrid，可以封装成自定义组件：

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

const NoHeaderDataGrid = styled(DataGrid)({
  '& .MuiDataGrid-columnHeaders': {
    display: 'none',
  },
  '& .MuiDataGrid-columnHeaderSeparator': {
    display: 'none',
  },
  '& .MuiDataGrid-topContainer': {
    height: 0,
    overflow: 'hidden',
  },
  '& .MuiDataGrid-main': {
    marginTop: 0,
  },
});

// 调用时直接使用自定义组件
<NoHeaderDataGrid rows={yourRows} columns={yourColumns} />

这样设置后，就能彻底移除表头并消除残留的空白区域，实现你想要的无表头表格效果。

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