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.