css - MUI X Data Grid respekterar inte vertikal celljustering efter uppdatering till 7.2.0

Jag har precis uppdaterat min MUI-app till den senaste versionen av npm-paketen. Detta inkluderar att uppgradera x-data-grid från 5.17.9 till 7.2.0.

I min app använder jag ett rutnät med några av kolumnerna ifyllda med hjälp av renderCell-egenskapen:

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,
    // ...
  },
];

Det brukade fungera bra, men efter uppdateringen tappade cellerna sin vertikala justering och nu stannar de högst upp:

Innan var cellerna fint centrerade både vertikalt och horisontellt:

Någon aning om vad som har ändrats och hur jag kan återställa den tidigare utblicken? Här är ett kort utdrag som ger en idé om hur min kod ser ut:

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>
  );
}

Svar #1

Efter att ha grävt ett tag, hittade jag anledningen i migrationsguiden:

https://mui.com/x/migration/migration-data-grid-v6/#css-klasser-och-styling

Det står:

Cellelementet är inte display: flex som standard. Du kan lägga till display: 'flex' på kolumndefinitionen för att återställa beteendet.

Jag satte 'flex' på min kolumn och det återställde automatiskt det tidigare utseendet.

Svar #2

byt ut ditt batteri med

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>
);

Relaterade artiklar