Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[system] Invalid PropType for Box #22982

Closed
2 tasks done
darkowic opened this issue Oct 11, 2020 · 5 comments
Closed
2 tasks done

[system] Invalid PropType for Box #22982

darkowic opened this issue Oct 11, 2020 · 5 comments
Assignees
@mnajdova
Labels
bug 🐛 Something doesn't work component: Box The React component. package: system Specific to @mui/system

Comments

@darkowic
Copy link
Contributor

  • 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.
@darkowic darkowic added the status: waiting for maintainer These issues haven't been looked at yet by a maintainer label Oct 11, 2020
@eps1lon eps1lon added bug 🐛 Something doesn't work component: Box The React component. discussion and removed status: waiting for maintainer These issues haven't been looked at yet by a maintainer bug 🐛 Something doesn't work discussion labels Oct 11, 2020
@oliviertassinari
Copy link
Member

oliviertassinari commented Oct 11, 2020 •
edited
Loading

@mnajdova What do you think about we drop this callback function API?

@darkowic
Copy link
Contributor Author

Why would you like to remove it? I don't remember what was the reason I needed it but looks like it works now with clone as expected.

        <Box position="relative" height="100%" width="400px" clone>
          <Search />
          {/* {(boxProps: { className: string }) => <Search {...boxProps} />} */}
        </Box>

@oliviertassinari
Copy link
Member

oliviertassinari commented Oct 11, 2020 •
edited
Loading

@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.

@darkowic
Copy link
Contributor Author

Thanks for your explanation. I'm totally ok with removing the clone property for Box if there still will be another simple API to style MUI components. I see you are going to use emotion or styled-components so there should be an easy way to inject custom styling (or Box like styling) into custom components using the MUI system.

@oliviertassinari oliviertassinari added the package: system Specific to @mui/system label Oct 20, 2020
@oliviertassinari oliviertassinari changed the title Invalid PropType for Box [system] Invalid PropType for Box Oct 20, 2020
This was referenced Oct 20, 2020
Closed
Merged
@oliviertassinari
Copy link
Member

Fixed in #23053 by @mnajdova

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@mnajdova mnajdova

Labels
bug 🐛 Something doesn't work component: Box The React component. package: system Specific to @mui/system
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
4 participants
@oliviertassinari @mnajdova @darkowic @eps1lon