[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?