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.
// 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.
margin-bottom is not applied to the button

margin-bottom is applied to the button

| 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
I can't explain it, we won't keep the clone prop long anyway (gone in v5).
No big deal for me. I can remove clone prop from my app.
Just asking, why you want to remove it?
To avoid issues like this one and to support the system props "everywhere".
Oh! I forgot that you guys are planning to include the system api in core. 馃槉
@mnajdova In #22982, I have advocated for removing the clone prop because:
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?
Most helpful comment
To avoid issues like this one and to support the system props "everywhere".