After updating my MUI app to the latest npm packages version, specifically upgrading x-data-grid from 5.17.9 to 7.2.0, I encountered an issue.
In my application, I utilize a grid where certain columns are populated using the renderCell property:
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,
// ...
},
];
Previously, everything was functioning correctly with the cells being vertically and horizontally centered like this:
https://i.sstatic.net/xnLQl.png
However, after the update, the vertical alignment of the cells is off as they now appear at the top:
https://i.sstatic.net/0ifZ1.png
I am seeking assistance in understanding what has changed causing this misalignment and how I can revert back to the original appearance. Below is a snippet illustrating the structure of my code:
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>
);
}