如何调整MUI DataGrid中GridActionsCellItem的Popper组件定位？

方法1：直接通过PopperProps传递定位配置 #

GridActionsCellItem组件支持通过PopperProps属性直接传递Popper组件的配置参数，包括控制位置的offset，这是最直接的解决方案：

import { GridActionsCellItem } from '@mui/x-data-grid';
import EditIcon from '@mui/icons-material/Edit';

// 列定义示例
const columns = [
  {
    field: 'actions',
    type: 'actions',
    getActions: (params) => [
      <GridActionsCellItem
        key="edit"
        icon={<EditIcon />}
        label="编辑"
        onClick={() => handleEdit(params.id)}
        // 传递Popper定位配置
        PopperProps={{
          modifiers: [
            {
              name: 'offset',
              options: {
                offset: [10, 20], // [水平偏移, 垂直偏移]，单位为px
              },
            },
          ],
        }}
      />,
    ],
  },
];

方法2：全局主题定制（批量调整所有操作菜单） #

如果需要统一调整所有GridActionsCellItem的菜单定位，可以通过MUI的主题配置批量设置：

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

const customTheme = createTheme({
  components: {
    MuiGridActionsCellItem: {
      defaultProps: {
        PopperProps: {
          modifiers: [
            {
              name: 'offset',
              options: {
                offset: [0, 15], // 全局统一偏移量
              },
            },
          ],
        },
      },
    },
  },
});

// 用ThemeProvider包裹DataGrid
function App() {
  return (
    <ThemeProvider theme={customTheme}>
      <DataGrid columns={columns} rows={rows} />
    </ThemeProvider>
  );
}

为什么之前的Styled组件修改无效？ #

你之前尝试通过styled组件修改base-Popper-root的offset是无效的，因为Popper的offset是组件的逻辑参数，并非CSS样式属性。这个偏移量由Popper.js的计算逻辑控制，必须通过Popper组件的modifiers props传递，无法通过修改CSS类实现。

额外技巧：调整菜单的触发位置 #

除了偏移量，还可以通过Popper的placement属性改变菜单的触发方位，比如让菜单显示在触发元素的右侧而非下方：

<GridActionsCellItem
  // ...其他属性
  PopperProps={{
    placement: 'right-start', // 菜单对齐触发元素的右上角
    modifiers: [
      {
        name: 'offset',
        options: {
          offset: [5, 0],
        },
      },
    ],
  }}
/>

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