[data grid] `CssBaseline`, `Stack` and adding a Border to a DataGrid causes the DataGrid to Infinitely expand Vertically about mui-x

[michelengelen]

Hey @bethmaloney ... does this happen to you in production?
I can reproduce the issue in codesandbox, but not in my local instance.
Could be some specific to the styles applied by CSB.
I'll try to find something or add it to the board for deeper investigation

[michelengelen]

I cannot reproduce this locally or in a build version!
This has to be specific to the environment.

One thing I could identify is that the Filler gets updated infinitely with a +1 px height. Might be related to the border being applied, since the jumps in height increase if you increase the border width.

I'll add this to the board for a deeper investigation!

CC @romgrk

[bethmaloney]

mui-expanding-grid.zip

@michelengelen I've attached a vite project that demonstrates the issue in a prod build (for me at least).

npm i
npm run build
npm run preview

Note that if you remove <CssBaseline /> the issue goes away.

[romgrk]

Removing border fixes the issue. The datagrid needs full control of its layout & dimensions to operate properly, so we can't support adding borders in some locations because it modifies the layout of the grid. It's preferable to either modify existing borders' color (e.g. to remove a border, make it transparent), or add borders via CSS that doesn't modify the dimensions (e.g. using floating ::after elements and adding borders on them). Would it be possible for you to use a different styling method?