[bug] The `styled` function does not work with MUI system about pigment-css HOT 3 OPEN

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?

from pigment-css.

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)```

from pigment-css.

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.

from pigment-css.