[BUG] Prevent props from passing through to DOM elements
See original GitHub issueIt seems the issue detailed in Issue 272 has re-occurred when using the latest version 5.5.5
in combination with styled components. I have tried earlier versions but same error is thrown:
React does not recognize the
customProp prop on a DOM element.
It seems all props are passed down by motion to the DOM element. They should be stripped out to prevent this error.
I have seen that an earlier fix was to utilise @emotion/is-prop-valid
as an optional dependency.
Perhaps this dependency is not correctly being used in cases when it should?
3. IMPORTANT: Provide a CodeSandbox reproduction of the bug https://github.com/mattbrannon/motion-console-warning Unfortunately unable to reproduce via sandbox, but @mattbrannon made this public repo specifically to demonstrate the issue.
4. Steps to reproduce
customProp
is passed on to the DOM element when using Styled Components
const Custom = styled(motion.div)`
opacity: ${({ customProp }) => customProp};
`
...
return (
<Custom customProp={1}></CustomProp>
)
5. Expected behavior
For custom props to filtered out and not passed on to the DOM element created by motion.
Issue Analytics
- State:
- Created 2 years ago
- Comments:6
Top GitHub Comments
I’ve just published
5.6.0
which will let you pass a custom function viaMotionConfig
:I had the same issue and fixed by only adding a $ to my props like so
$customProp
Apparently this release solves the issue with props filtering https://github.com/styled-components/styled-components/releases/tag/v5.1.0