[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")