[styled-engine-sc] Unknown prop "sx" warning when using styled with styled-components v6

[Nico142]

Steps to reproduce

Link to live example: https://codesandbox.io/p/sandbox/mui-styled-components-prop-forwarding-knft9v

Steps:

1. Setup styles with styled-components (https://mui.com/material-ui/integrations/styled-components/)
2. Use styled('div') from @mui/material/styles
3. Add sx styles to the created component
4. Warning in dev tool console & sx in rendered div

Current behavior

The given sx property isn't removed in the rendered div:

<div sx="[object Object]" class="sc-guDLey idRkGC">Styled div</div>

Expected behavior

In the styled documentation is written:
It adds by default the shouldForwardProp option (that can be overridden), taking into account: ownerState, theme, sx, and as.
Therefore I would expect the sx property to be removed from the rendered div.

Context

No response

Your environment

package.json

• styled-components 6.1.8
• @mui/styled-engine-sc 5.14.12
• @mui/styles 5.15.14
• @mui/material 5.15.14

System

• Lates Chrome & MacOS version
• yarn 4.1.0

Search keywords: sx warning, styled, styled-components

[ZeeshanTamboli]

I believe it's a bug. As mentioned in the documentation, it shouldn't pass the sx prop to the DOM. I think this occurs since styled-components v6 where shouldForwardProp is no longer provided by default - https://styled-components.com/docs/faqs#shouldforwardprop-is-no-longer-provided-by-default. However, I'm not entirely certain, so I won't label it as a bug just yet.

[brijeshb42]

@Nico142 Have you tried with the latest v6 of @mui/styled-engine-sc ?

[Nico142]

Hi @brijeshb42,

I tried the 6.0.0-alpha.19 version of @mui/styled-engine-sc (with @mui/material & @mui/styles in version 6.0.0-alpha.0) but still get the same result.

@ZeeshanTamboli: yes, thats correct. The error occurred with the styled-components prop forwarding change. My current workaround is to use the <StyleSheetManager shouldForwardProp={...}> to filter out the sx manually, but I wanted to make sure if this is something @mui should take care of.

[ZeeshanTamboli]

My current workaround is to use the <StyleSheetManager shouldForwardProp={...}> to filter out the sx manually, but I wanted to make sure if this is something @mui should take care of.

Yes, I think MUI should take care of it in the mui-styled-engine-sc package.