Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

[system] Invalid PropType for Box

See original GitHub issue

The issue is present in the latest release.
I have searched the issues of this repository and believe that this is not a duplicate.

Current Behavior 😯

Using Box with function as children throws a PropType warning

Warning: Failed prop type: Invalid prop `children` supplied to `ForwardRef(StyledComponent)`, expected a ReactNode.

Expected Behavior 🤔

No warning

Steps to Reproduce 🕹

https://codesandbox.io/s/goofy-glade-emf0h?file=/demo.js

      <Box color="success.main">
        {(props) => <span {...props}>Test function</span>}
      </Box>

Context 🔦

Your Environment 🌎

Tech	Version
Material-UI	alpha 12
React	16.8
Browser
TypeScript	4
etc.

Issue Analytics

State:
Created 3 years ago
Reactions:1
Comments:5 (5 by maintainers)

Top GitHub Comments

1reaction

oliviertassinaricommented, Oct 11, 2020

@darkowic Yes, the above proposal comes hand-in-hand with removing the clone prop. The prop has been unreliable and will likely never be. It’s often used to override existing styles, however, to work correctly the styles have to be injected after in the <head>. The order is ruled by the import order. With JSS, it only works when using 1-level imports. With emotion & styled-components, I haven’t tried but I imagine it will be as brittle.

The alternative would be the introduction of the sx prop (same as the system) in all the core components and styles created with our styled helper.

0reactions

oliviertassinaricommented, Oct 23, 2020

Fixed in #23053 by @mnajdova