[system] Remove Box clone prop

[numToStr]

• 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 😯

clone prop works perfectly fine in development. But when I saw the production build of the app, there styling is ignored which is applied by <Box clone/> component.

Steps to Reproduce 🕹

// BaseRouterLink
import React, { forwardRef } from "react";
import {
    Link as RouterLink,
    LinkProps as RouterLinkProps
} from "react-router-dom";

export default forwardRef<HTMLAnchorElement, RouterLinkProps>((props, ref) => (
    <RouterLink innerRef={ref} {...props} />
));

// <BackButton />
import React, { FC } from "react";
import IconButton, { IconButtonProps } from "@material-ui/core/IconButton";
import BackIcon from "@material-ui/icons/ArrowBackTwoTone";
import BaseRouterLink from "./Base/BaseRouterLink";
import Box from "@material-ui/core/Box";

type Props = IconButtonProps & {
    to: string;
};

const BackButton: FC<Props> = ({ to }) => {
    return (
        <Box clone mb={2}>
            <IconButton component={BaseRouterLink} color="primary" to={to}>
                <BackIcon fontSize="small" />
            </IconButton>
        </Box>
    );
};

export default BackButton;

I attached some images to clarify the scenario with the above components.

Production Build:

margin-bottom is not applied to the button

Development Build:

margin-bottom is applied to the button

Your Environment 🌎

Tech	Version
Material-UI	^4.6.1
React	^16.12.0
Browser	Firefox v70
TypeScript	^3.7.2
etc.

---

I hope component order is not the problem

[oliviertassinari]

I can't explain it, we won't keep the clone prop long anyway (gone in v5).

[numToStr]

No big deal for me. I can remove clone prop from my app.

Just asking, why you want to remove it?

[oliviertassinari]

To avoid issues like this one and to support the system props "everywhere".

[numToStr]

Oh! I forgot that you guys are planning to include the system api in core. 😊

[oliviertassinari]

@mnajdova In #22982, I have advocated for removing the clone prop because:

1. it doesn't longer solve a pain point with the support of the system in the core components (only help with BC)
2. the injection order is often hard to get right: Box clone not overriding child component styles #15993 (comment) and [system] Remove Box clone prop #18496.

However, I have tried with styled-components and emotion, the injection ordered seemed to be correct, I have no idea how. Do you know? I'm surprised. Should we ask each library's maintainer to make sure this API is reliable and stable going forward?

[oliviertassinari]

Done in #26031 by @m4theushw