Material-ui: [system] Box clone prop ignored in production build

Created on 22 Nov 2019  路  5Comments  路  Source: mui-org/material-ui

  • [x] The issue is present in the latest release.
  • [x] 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
production

Development Build:

margin-bottom is applied to the button
development

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

bug 馃悰 system

Most helpful comment

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

All 5 comments

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:

  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: https://github.com/mui-org/material-ui/issues/15993#issuecomment-506947660 and #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?

Was this page helpful?
0 / 5 - 0 ratings

Related issues

newoga picture newoga  路  3Comments

revskill10 picture revskill10  路  3Comments

activatedgeek picture activatedgeek  路  3Comments

anthony-dandrea picture anthony-dandrea  路  3Comments

FranBran picture FranBran  路  3Comments