Custom Theme Not Working with @mui/material 6.0.0 and pigment-css in Next.js

[wh5938316]

Steps to reproduce

next.config.mjs

export default withPigment(nextConfig, {
  theme: createTheme({
    cssVariables: true,
    colorSchemes: { light: true, dark: true },
    typography: {
      fontFamily: 'var(--font-roboto)',
    },
    components: {
      MuiButton: {
        styleOverrides: {
          root: {
            background: '#000 !important',
          },
        },
      }
    }
  }),
  transformLibraries: ['@mui/material'],
});

The custom theme is not being applied as expected. Components do not reflect the customized theme settings.

Current behavior

No response

Expected behavior

No response

Context

No response

Your environment

npx @mui/envinfo

  Don't forget to mention which browser you used.
  Output from `npx @mui/envinfo` goes here.

Search keywords: pigment-css, next.js

[wh5938316]

The issue has been taken over by the @mui/material maintainers.
@mui/material issue #43501

[wh5938316]

Resolved after 0.0.21 release