Priority of styleOverrides with custom theme higher than sx when using pigment-css in layout.tsx (Next.js)

[wh5938316]

Steps to reproduce

When using pigment-css as a replacement for @emotion/react in a Next.js project, I noticed that in the layout.tsx file, the priority of styleOverrides in a custom theme takes precedence over the sx prop styling applied directly to MUI components.

Interestingly, this issue does not occur in page.tsx, where the sx prop correctly overrides the styleOverrides in the theme.

I am not sure if this issue also occurs with @emotion/react, but it seems inconsistent and potentially problematic. The sx prop is intended for inline, component-level styling and should ideally have the highest priority.

Github repository

It behaves strangely on Codesandbox; the theme settings configured in next.config.mjs do not take effect.
Codesandbox

Current behavior

next.config.mjs

export default withPigment(nextConfig, {
  theme: createTheme({
    cssVariables: true,
    colorSchemes: { light: true, dark: true },
    typography: {
      fontFamily: 'var(--font-roboto)',
    },
    components: {
      MuiList: {
        styleOverrides: {
          root: {
            padding: '8px',
          },
        },
      },
    }
  }),
  transformLibraries: ['@mui/material'],
});

page.tsx, layout.tsx

<List sx={{
  border: '1px solid'
}}>
  <ListItem>
    <ListItemButton>the</ListItemButton>
  </ListItem>
  <ListItem>
    <ListItemButton>wrong</ListItemButton>
  </ListItem>
  <List
    component="div"
    sx={{
      padding: 4,
    }}>
    <ListItem>
      <ListItemButton>style</ListItemButton>
    </ListItem>
    <ListItem>
      <ListItemButton>priority</ListItemButton>
    </ListItem>
  </List>
</List>

Expected behavior

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, v6, next.js

[wh5938316]

To add, after building the project, everything displays correctly. This issue currently only occurs in dev mode.

[DiegoAndai]

This one should be fixed with mui/pigment-css#199

[Janpot]

This will be fixed after mui/pigment-css#226 is released.

Here's a codesandbox with the patched package: https://codesandbox.io/p/github/wh5938316/mui-v6-pigment-css/csb-ymg78v/draft/floral-dream

[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

We value your feedback @wh5938316! How was your experience with our support team?
If you could spare a moment, we'd love to hear your thoughts in this brief Support Satisfaction survey. Your insights help us improve!