sx property on Grid doesn't allow changing paddingTop

[OnlyJoe33]

• [Y] The issue is present in the latest release.
• [Y] I have searched the issues of this repository and believe that this is not a duplicate.

Current Behavior 😯

<Grid item sx={{ paddingTop: 4 }}></Grid>

Padding remains at 1 spacing.
From what I can tell the "generateRowGap/ColumnGap" internal function is overriding this padding internally to work with "spacing" property on a grid. This makes it annoying to override the style for just one grid element. This should probably check if there is an existing paddingTop value first.

I assume this is the same for "paddingLeft" looking at the code.

It still works if you use "style" property on the grid item.

Expected Behavior 🤔

You would expect this to increase the paddingTop to 4 spacings.

[adamfitzgibbon]

Taking a look!

[siriwatknp]

@OnlyJoe33 Hey, we have released Grid v2 in v5.9.1 which fixes this issue. Can you give it a try?

The doc is not live but you can take a look at https://deploy-preview-33554--material-ui.netlify.app/material-ui/react-grid2/. (Here is the PR for the doc)

The usage is like this:

import Grid from '@mui/material/Unstable_Grid2';