更新到 7.2.0 后，MUI x-data-grid 不考虑垂直单元格对齐

Question

我刚刚将我的 MUI 应用程序更新到最新版本的 npm 软件包。这包括将 x-data-grid 从 5.17.9 升级到 7.2.0。

在我的应用程序中，我使用网格，其中一些列使用

renderCell

属性填充：

const cell = (props: GridRenderCellParams<any, string>): JSX.Element => (
  <Typography sx={isGood} key={props.value}>
    {props.value}
  </Typography>
);

const columns: GridColDef[] = [
  {
    field: 'text',
    headerName: 'TEXT',
    renderCell: cell,
    // ...
  },
];

它曾经工作得很好，但更新后单元格失去了垂直对齐，现在它们停留在顶部：

在单元格在垂直和水平方向上都很好地居中之前：

知道发生了什么变化以及如何恢复以前的前景吗？ 这是一个简短的片段，让您了解我的代码是什么样的：

export const isGood = {
  color: 'green',
  fontWeight: 'bold',
};

const cell = (props: GridRenderCellParams<any, string>): JSX.Element => (
  <Typography sx={isGood} key={props.value}>
    {props.value}
  </Typography>
);

const columns: GridColDef[] = [
  {
    field: 'text',
    headerName: 'TEXT',
    align: 'center',
    headerAlign: 'center',
    width: 150,
    renderCell: cell,
    editable: false,
    flex: 1,
    disableColumnMenu: true,
    sortable: false,
  },
];

const rows = [
  {
    id: 1,
    text: 'T1',
  },
  {
    id: 2,
    text: 'T2',
  },
  {
    id: 3,
    text: 'T3',
  },
];

export default function RenderCellGrid() {
  return (
    <div style={{ height: 300, width: '100%' }}>
      <DataGrid
        hideFooter
        disableRowSelectionOnClick
        disableColumnSelector
        autoHeight
        columnHeaderHeight={40}
        rows={rows}
        columns={columns}
        rowHeight={85}
      />
    </div>
  );
}

Answer 1

将您的手机更换为

const cell = (props: GridRenderCellParams<any, string>): JSX.Element => (
    <Box sx={{height:85,display:"flex", flexDirection:"row", alignItems:"center", justifyContent:"center"}}>
        <Typography sx={isGood} key={props.value}>
            {props.value}
        </Typography>
    </Box>
);