[pigment-css][Grid] Spacing isn't working as expected

[Mike-Ro]

Steps to reproduce

Hi everyone!

I’m following the documentation here: https://mui.com/material-ui/migration/migrating-to-pigment-css/#migrating-layout-components, and I’ve written this code:

// src/app/page.js
import Grid from '@mui/material-pigment-css/Grid';

export default function page() {
  return (
    <Grid container spacing={2}>
      <Grid>1</Grid>
      <Grid>2</Grid>
    </Grid>
  );
}

The spacing is being converted to 2px. Is that how it’s supposed to work?

Current behavior

No response

Expected behavior

No response

Context

No response

Your environment

Libs:

"@mui/icons-material": "^6.1.2",
"@mui/material": "^6.1.2",
"@mui/material-pigment-css": "^6.1.2",
"@mui/system": "^6.1.2",
"@pigment-css/nextjs-plugin": "^0.0.24",

Search keywords: pigmentcss

[DiegoAndai]

Hey @Mike-Ro, thanks for the report. I can confirm this is a bug. We'll be working on it.

[DiegoAndai]

Hey @Mike-Ro, sorry for the delay. May I ask you to share your nextjs.config.js content? (I assume you're using next as you have "@pigment-css/nextjs-plugin")

[DiegoAndai]

I've retested, and the Grid is working as expected. I added a test to cover this: #44132

It won't work if a function is provided to the theme's spacing. This is because, after #43389, when spacing is a function, the spacing CSS variables are not generated, which is the Grid's (and Stack's) implementation. In this case, the spacing value will be used directly (2px for spacing={2}), as is reported here. Is this your case @Mike-Ro?

[github-actions]

Since the issue is missing key information and has been inactive for 7 days, it has been automatically closed. If you wish to see the issue reopened, please provide the missing information.

[Mike-Ro]

@DiegoAndai yes, thanks!

[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.

Note

@Mike-Ro 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.