[bug] The styled function does not work with MUI system

[siriwatknp]

Steps to reproduce

See https://github.com/mui/material-ui/actions/runs/8837080528/job/24265117421?pr=41663 in mui/material-ui#41663

Current behavior

ownerState is undefined in InputBase styles when FilledInput (Pigment) is wrapping Input (MUI System).

const FilledInputRoot = styled(InputBase)(…)

The root cause is that FilledInputRoot does not forward ownerState to InputBase which causes an error from the InputBase.

Expected behavior

They should work together, both MUI System wrappin Pigment or Pigment wrapping MUI System.

Context

Found this issue when trying to migrate only FilledInput to support Pigment CSS.

Your environment

npx @mui/envinfo

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

Search keywords: styled

[mnajdova]

The root cause is that FilledInputRoot does not forward ownerState to InputBase which causes an error from the InputBase.

Can't we use the shouldForwardProp for this? Can you create a simplified stackblitz to showcase the issue?

[jbogedahl-st]

I believe I am hitting something similar... I am building a new next.js react app using app router and React Server Components. I found this awesome library and all the MUI - nextjs stuff that is coming together. I'm taking a gamble that MUI v6 with pigment-css will be released about the same time that I need it for this project (end of year 2024).

To see an example, I have created an app here: https://codesandbox.io/p/devbox/lively-snowflake-jc79t8

In this app, I have my layout, page and applicationHeader component all setup as RSC with appropriate styles, etc. I then embed a userProfileDropdown SSR / client component that uses material-ui emotion theming. All of this seems to work fine, styles seem to be applied correctly in both RSC and client components. However, I'm hitting an error when trying to reference Material-UI theme values directly. For example, my menu component will often be displayed inside modals, therefore, we bump up the z-index on the menu component to display correctly once in a modal. To do this, we grab the theme.zindex.modal value and add 10 to it.

I'm hitting a build error, because it is unable to find that value in my pigment-css theme. Is there a way to setup my application so that the pigment-css theme merges the material-ui theme, or can tell the build engine to ignore the material-ui theme variables?

The build error is:

TypeError: /project/workspace/src/components/menu.tsx: Cannot read properties of undefined (reading 'modal')
    at /project/workspace/src/components/menu.tsx:12:28
    at SxProcessor.processCss (/project/workspace/node_modules/@pigment-css/react/processors/sx.js:260:59)
    at SxProcessor.build (/project/workspace/node_modules/@pigment-css/react/processors/sx.js:162:22)
    at /project/workspace/node_modules/@wyw-in-js/transform/lib/plugins/collector.js:26:17
    at /project/workspace/node_modules/@wyw-in-js/transform/lib/utils/getTagProcessor.js:384:5
    at Array.forEach (<anonymous>)
    at applyProcessors (/project/workspace/node_modules/@wyw-in-js/transform/lib/utils/getTagProcessor.js:375:10)
    at /project/workspace/node_modules/@wyw-in-js/transform/lib/plugins/collector.js:25:42
    at EventEmitter.perf (/project/workspace/node_modules/@wyw-in-js/transform/lib/utils/EventEmitter.js:45:20)
    at collector (/project/workspace/node_modules/@wyw-in-js/transform/lib/plugins/collector.js:24:16)```

[jbogedahl-st]

I'm hitting a build error, because it is unable to find that value in my pigment-css theme. Is there a way to setup my application so that the pigment-css theme merges the material-ui theme, or can tell the build engine to ignore the material-ui theme variables?

I resolved this by extending the MUI Theme - this is exactly what I was looking and it clicked in my head today what to do.