React中如何为MUI X Data Grid的行添加左右边距？

推荐用MUI内置的sx属性结合rowClassName实现，比零散写CSS更规范，具体实现如下：

实现步骤 #

• 给DataGrid组件添加rowClassName属性，指定自定义行类名
• 通过sx属性直接配置该行的左右内边距，可选同步调整表头样式保证对齐

代码示例 #

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

// 你的列配置
const columns = [
  { field: 'id', headerName: 'ID', width: 70 },
  { field: 'name', headerName: '姓名', width: 130 },
  { field: 'age', headerName: '年龄', width: 90 },
];

// 你的数据
const rows = [
  { id: 1, name: '张三', age: 25 },
  { id: 2, name: '李四', age: 30 },
];

export default function CustomRowGrid() {
  return (
    <div style={{ height: 400, width: '100%' }}>
      <DataGrid
        rows={rows}
        columns={columns}
        rowClassName="custom-grid-row"
        sx={{
          // 给自定义行设置左右边距
          '& .custom-grid-row': {
            padding: '0 16px',
            boxSizing: 'border-box',
          },
          // 可选：让表头和行内容对齐，同步设置表头左右内边距
          '& .MuiDataGrid-columnHeader': {
            paddingLeft: '16px',
            paddingRight: '16px',
          }
        }}
      />
    </div>
  );
}

说明 #

• 直接给行容器设置padding: '0 16px'，无需单独调整每个单元格
• boxSizing: border-box确保边距不会让行超出表格容器宽度
• 如果需要表头和行内容对齐，同步配置.MuiDataGrid-columnHeader的内边距即可

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