Hydration Error in React 19 with Pigment CSS and MuiSvgIcon fontSize prop

[wh5938316]

Steps to reproduce

Steps:

1. Update to React 19.
2. Update to Next 15.
3. Use Pigment CSS alongside MUI.
4. Override the MuiSvgIcon component’s variants.fontSize.small in the custom theme.

export default withPigment(nextConfig, {
  theme: createTheme({
    cssVariables: true,
    components: {
      MuiSvgIcon: {
        styleOverrides: {
          root: {
            fill: 'currentColor',
            color: 'inherit',
            variants: [
              {
                props: {
                  fontSize: 'small',
                },
                style: {
                  fontSize: '1rem',
                },
              },
            ],
          },
        },
      },
    }
  }),
  transformLibraries: ['@mui/material'],
});

5. Set the fontSize prop on an MuiSvgIcon component in the app.

<SvgIcon fontSize="small">
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
    <path d="M15.41 7.41 14 6l-6 6 6 6 1.41-1.41L10.83 12z" />
  </svg>
</SvgIcon>

Current behavior

No response

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, react19, next15, hydration error

[mj12albert]

@wh5938316 Would you mind providing a repro in codesandbox or stackblitz?

[wh5938316]

@wh5938316 Would you mind providing a repro in codesandbox or stackblitz?

@mj12albert
here is codesandbox link
the github repo

[DiegoAndai]

@brijeshb42 may I ask you to identify if this is on Pigment CSS or Material UI side?

[wh5938316]

@brijeshb42 @DiegoAndai Hi, Is there any progress on this issue?

[brijeshb42]

Hey. It went out of my radar. I'll check this today and get back.

[brijeshb42]

I have not been able to debug the cause of this issue. The main location where it's supposed to tell the difference in the className attribute, it cuts off to ellipsis.
s1jwuyke s1jwuyke-15 MuiSvgIcon-root MuiSvgIcon-fontSizeSmall s1jwuyke-3 ...

I checked both the server and the client rendered classNames and found both to be same though which is also validated by the prod build having the same classnames

s1jwuyke s1jwuyke-15 MuiSvgIcon-root MuiSvgIcon-fontSizeSmall s1jwuyke-3 s1jwuyke-14 s1jwuyke-16.

Update:

I found that the code generated for server side is different from the one generated for client side. Debugging more.