`styled` with `shouldForwardProp` breaks forwarding of internal props

[pushys]

Steps to reproduce

Steps:

1. Open this link to live example: https://stackblitz.com/edit/github-ljljbrse?file=src%2FApp.tsx
2. Inspect the div node.

Current behavior

If you inspect the node, it has internal props such as as or sx forwarded directly to HTML.

Expected behavior

Internal props should not be forwarded to HTML nodes when shouldForwardProp is provided.

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: styled, shouldForwardProp

[siriwatknp]

This is expected because shouldForwardProp replace the default one, this gives you full control of the forwarding logic.

If you want to create styles based on props, I recommend using ownerState as it's already included in the shouldForwardProp by default. The ownerState is used in all of Material UI components.

const StyledDiv = styled('div')<{ ownerState: { elevation: number } }>(({ theme }) => ({
  variants: [
    ...theme.vars.shadows.map((_, index) => ({
      props: { elevation: index }, // no need to declare `ownerState` here because it is destructed internally.
      style: { boxShadow: theme.vars.shadows[index] },
    })),
  ],
}));

<StyledDiv ownerState={{ elevation: 3 }} sx={{ mt: 3 }} />

https://stackblitz.com/edit/github-ljljbrse-4utju1wc?file=src%2FApp.tsx

[github-actions]

This issue has been closed. If you have a similar problem but not exactly the same, please open a new issue.
Now, if you have additional information related to this issue or things that could help future readers, feel free to leave a comment.

Note

@pushys How did we do? Your experience with our support team matters to us. If you have a moment, please share your thoughts in this short Support Satisfaction survey.