[styled-engine-sc] Unknown prop "sx" warning when using styled with styled-components v6
Open
@brijeshb42 is already working on this.
Since Mar 20, 2024.
package: styled-engine-sc
scope: system
- Dominant language
- JavaScript
- Stars
- 99.1k
- Forks
- 32.5k
- Avg merge
- 2d 17h
- Merged PRs (30d)
- 106
Description
Steps to reproduce
Link to live example: https://codesandbox.io/p/sandbox/mui-styled-components-prop-forwarding-knft9v
Steps:
- Setup styles with styled-components (https://mui.com/material-ui/integrations/styled-components/)
- Use
styled('div')from@mui/material/styles - Add
sxstyles to the created component - Warning in dev tool console &
sxin 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
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Assessment
This issue has not been assessed yet.