[data grid] - Wrong cell content alignment and position when using a custom renderCell function

[TiagoPortfolio]

Steps to reproduce

Link to live example: (required)

Steps:
1.
2.
3.

Current behavior

After upgrading @mui/x-data-grid to version "7.0.0-beta.4", all the content of the cells of my columns using a custom renderCell function is either not aligned at the center or the position of the elements is completely different.
For instance:

BEFORE	AFTER

Note that I didn't use v7.0.0-beta.5 yet, is this maybe fixed in this version?

Expected behavior

I expect the alignment and positioning of the content in the cells to stay the same

Context

No response

Your environment

Used Chrome: 122.0.6261.94

`npx @mui/envinfo`

   System:
    OS: macOS 14.2.1
  Binaries:
    Node: 20.4.0 - ~/.nvm/versions/node/v20.4.0/bin/node
    npm: 9.7.2 - ~/.nvm/versions/node/v20.4.0/bin/npm
    pnpm: 8.13.1 - ~/.nvm/versions/node/v20.4.0/bin/pnpm
  Browsers:
    Chrome: 122.0.6261.94
    Edge: Not Found
    Safari: 17.2.1
  npmPackages:
    @emotion/react: 11.11.3 => 11.11.3
    @emotion/styled: 11.11.0 => 11.11.0
    @mui/icons-material: 5.15.10 => 5.15.10
    @mui/lab: 5.0.0-alpha.165 => 5.0.0-alpha.165
    @mui/material: 5.15.10 => 5.15.10
    @mui/system: 5.15.9 => 5.15.9
    @mui/types: 7.2.13 => 7.2.13
    @mui/x-data-grid: 7.0.0-beta.4 => 7.0.0-beta.4
    @mui/x-data-grid-generator: 7.0.0-beta.4 => 7.0.0-beta.4
    @mui/x-data-grid-premium: 7.0.0-beta.4 => 7.0.0-beta.4
    @mui/x-data-grid-pro: 7.0.0-beta.4 => 7.0.0-beta.4
    @mui/x-date-pickers: 6.17.0 => 6.17.0
    @mui/x-date-pickers-pro: 6.17.0 => 6.17.0
    @mui/x-tree-view: 6.17.0 => 6.17.0
    @types/react: 18.2.58 => 18.2.58
    react: 18.2.0 => 18.2.0
    react-dom: 18.2.0 => 18.2.0
    styled-components: 5.3.5 => 5.3.5
    typescript: 5.3.3 => 5.3.3

Search keywords: renderCell cell position alignment content grid datagrid
Order ID: 54728

[romgrk]

Details in the migration guide, cells aren't flex by default: https://github.com/mui/mui-x/blob/next/docs/data/migration/migration-data-grid-v6/migration-data-grid-v6.md#css-classes-and-styling

[github-actions]

⚠️ This issue has been closed.
If you have a similar problem, please open a new issue and provide details about your specific problem.
If you can provide additional information related to this topic that could help future readers, please feel free to leave a comment.

How did we do @TiagoPortfolio?
Your experience with our support team matters to us. If you have a moment, please share your thoughts through our brief survey.

[TiagoPortfolio]

Details in the migration guide, cells aren't flex by default: https://github.com/mui/mui-x/blob/next/docs/data/migration/migration-data-grid-v6/migration-data-grid-v6.md#css-classes-and-styling

Thanks for the quick reply @romgrk !
Can I get more insights on what is the reason behind this change?
Our app has dozens if not hundreds of tables, will we have to review every column of our tables? 👀

[romgrk]

We previously had cells in the structure .cell > .cellContent > [your content here]. We wanted to remove the .cellContent wrapper from the DOM structure, because less cell DOM elements means faster rendering for everyone. Unfortunately there wasn't a way to preserve 100% compatibility, and cells with element childs now need to be explicitly set to flex. You can add display: 'flex' directly on your grid column definition everywhere you have a custom renderCell that returns non-text nodes (aka element nodes). All the grid native column types are styled properly, but yes you'll need to review your columns. Only the ones with renderCell though.

[romgrk]

If you find issues while adjusting the styles, make sure to report so we can fix it before the end of the beta phase.