[DataGrid] cell content not consistently center aligned

[cmccormick-im]

Steps to reproduce

Link to live example: https://stackblitz.com/edit/react-eteo2e?file=Demo.tsx

Steps:

1. Add a DataGrid component and at least one column with the renderCell property defined.
2. Observe that the column with renderCell property is not centered vertically compared to other cells.

Current behavior

The content of renderCell is not centered vertically compared to other cells.

Expected behavior

The content of renderCell should be centered vertically to align with other cells.

Context

When upgrading a project from DataGrid 6 to 7, there were a number of DataGrid usages that had noticeable visual regressions. These regressions appear to be caused by a change in how renderCell content is rendered. Specifically, the content of renderCell is no longer always vertically aligned with other cells in the DataGrid.

However, this doesn't necessarily seem to be limited to renderCell. You can tell by comparing the v6 documentation to v7, where this issue also exists with the getRowHeight prop:

• v6 (correct behavior): https://v6.mui.com/x/react-data-grid/row-height/#dynamic-row-height
  
• v7 (incorrect behavior): https://mui.com/x/react-data-grid/row-height/#dynamic-row-height
  

Upon further comparisons, it looks like some cell styles in v7 are being overridden by the user agent stylesheet.

Your environment

npx @mui/envinfo

  System:
    OS: macOS 14.4.1
  Binaries:
    Node: 20.9.0 - ~/.nvm/versions/node/v20.9.0/bin/node
    npm: 10.1.0 - ~/.nvm/versions/node/v20.9.0/bin/npm
    pnpm: Not Found
  Browsers:
    Chrome: 124.0.6367.92
    Edge: Not Found
    Safari: 17.4.1
  npmPackages:
    @emotion/react: ^11.11.4 => 11.11.4 
    @emotion/styled:  11.11.0 
    @mui/base:  5.0.0-beta.40 
    @mui/core-downloads-tracker:  5.15.15 
    @mui/icons-material:  5.14.9 
    @mui/lab: ^5.0.0-alpha.170 => 5.0.0-alpha.170 
    @mui/material: ^5.15.15 => 5.15.15 
    @mui/private-theming:  5.15.14 
    @mui/styled-engine:  5.15.14 
    @mui/system:  5.15.15 
    @mui/types:  7.2.14 
    @mui/utils:  5.15.14 
    @mui/x-data-grid: ^7.3.1 => 7.3.1 
    @mui/x-date-pickers:  6.14.0 
    @types/react: ^18.2.79 => 18.2.79 
    react: ^18.2.0 => 18.2.0 
    react-dom: ^18.2.0 => 18.2.0 
    styled-components:  5.3.11 
    typescript: ^5.4.5 => 5.4.5 

Search keywords: datagrid, renderCell, center, getRowHeight

[MBilalShafi]

This is the required behavior in v7, check point no 4 of this migration guide section: https://mui.com/x/migration/migration-data-grid-v6/#css-classes-and-styling

Does that solve your concern?

[cmccormick-im]

@MBilalShafi that resolves it, thank you, I missed that part of the notes.

[MBilalShafi]

Great, I'll close this issue in that case.

[github-actions]

⚠️ This issue has been closed. If you have a similar problem but not exactly the same, please open a new issue.
Now, if you have additional information related to this issue or things that could help future readers, feel free to leave a comment.

@cmccormick-im: How did we do? Your experience with our support team matters to us. If you have a moment, please share your thoughts in this short Support Satisfaction survey.