[Box] Remove render prop

[m4theushw]

Breaking changes

• [Box] Remove the render prop because its behavior can be obtained using the sx prop directly on the child if it's a Material-UI component. For non-Material-UI components use the sx prop in conjunction with the component prop:

  -<Box sx={{ border: '1px dashed grey' }}>
  -  {(props) => <Button {...props}>Save</Button>}
  -</Box>
  +<Button sx={{ border: '1px dashed grey' }}>Save</Button>

  -<Box sx={{ border: '1px dashed grey' }}>
  -  {(props) => <button {...props}>Save</button>}
  -</Box>
  +<Box component="button" sx={{ border: '1px dashed grey' }}>Save</Box>

---

• I have followed (at least) the PR section of the contributing guide.

Part of #20012.
A follow up of #26031. #26031 (comment)

https://deploy-preview-26113--material-ui.netlify.app/components/box

[mui-pr-bot]

Details of bundle changes

Generated by 🚫 dangerJS against 6e2158d

[mnajdova]

Let’s also add in the breaking changes of how we can also apply this on the intrinsic elements, for example using the component prop:

-<Box sx={{ border: '1px dashed grey' }}>
-  {(props) => <button {...props}>Save</button>}
-</Box>
+<Box component='button' sx={{ border: '1px dashed grey' }} />

[mnajdova]

I would here also mention the component prop for the non Material-UI components.

[oliviertassinari]

At some point, I have wondered if it wouldn't make sense to keep the render prop API for when customizing third-party components, but forcing the developer down the styled() API is probably better, so all good from my end (and we have #23220).

---

On a different note, the documentation page of the Box could maybe be improved. What about the following proposal?

1. In /system/basics/#2-box, describe how to create its own Box component without the core, but @material-ui/styled-engine. This would be for the audience that doesn't want to use the core components.
2. In /system/basics/#3-custom-components, describe how it create its own styled function with the sx prop and @material-ui/styled-engine. This would be for the audience that doesn't want to use the core components.
3. In /components/box/:

• explain that its a dom node that renders as a div by default and that hosts the system. A quick simple demo with the `sx prop. Link to the sx page of the docs to explain what its
• describe the component prop, it's not explained anywhere
• give a more full-featured demo, maybe using https://deploy-preview-26113--material-ui.netlify.app/system/basics/#demo.
• explain that the system is also accessible with flattened props. Have a quick demo and maybe also include https://deploy-preview-26113--material-ui.netlify.app/system/basics/#demo with flatten props.
• remove "Overriding Material-UI components" or have a quick section to reiterate the points of https://deploy-preview-26113--material-ui.netlify.app/system/basics/#implementations.

[m4theushw]

describe the component prop, it's not explained anywhere

It's explained in "Overriding Material-UI components". I agree that this section should be removed or converted to describe how to use the component prop to override non-Material-UI components. For core components, we should encourage to use directly the sx prop, maybe with a warning at the beginning of the page.

These small updates in the docs I'll do in another PR.

[mnajdova]

👍