Using the Box component with the clone attribute has inconsistent styling in production vs dev

[CodySchaaf]

The resulting styles when using the Box component with the clone attribute are created differently in production than they are in development mode.

Ideally the Box component would be able to override styles in production mode like it does in development, but at the very least it should be the same in both modes.

With the current limbo of jss and possible conversion to a different css-in-js library (#16947) I have been trying to use the Box component as much as possible to reduce the amount of change needed if material-ui decides to change. So it would be best if the Box component was able to override original styles, and behave consistently between environments.

• The issue is present in the latest release.
• I have searched the issues of this repository and believe that this is not a duplicate.

Seems related to #16609 , but that was already closed.

Current Behavior 😯

The resulting styles are created differently in production than they are in development mode, with the production mode not allowing the Box component using the clone attribute to override already defined styles like background-color.

Production: Card has white background
Development: Card has Purple Background

Expected Behavior 🤔

It should work the same in production as it does in develop, with the <Box clone bgcolor="primary.main"> overriding the child component <Card>'s (or any other material component's) original styles.

Production: Card has Purple Background
Development: Card has Purple Background

Steps to Reproduce 🕹

Steps:

1. Use the Box component with the clone attribute to override a style on a material-ui component like the Card.
2. Override a style like bgcolor which is already defined on the child component.
3. Check the development version where it works
4. Check the production version where is doesn't

Code:

// import condition matters! 
import { Box, Card } from '@material-ui/core';

const ConnectedApp = () => {
  return (
    <Box clone bgcolor="primary.light">
      <Card>Foo</Card>
    </Box>
  );
};

Dev Output:

<style data-jss="" data-meta="MuiPaper">
.MuiPaper-root {
  color: rgba(0, 0, 0, 0.87);
  transition: box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
  background-color: #fff;
}
<!-- ...rest -->
</style>

<style data-jss="" data-meta="MuiBox">
.MuiBox-root-2 {
    background-color: rgb(121, 134, 203);
}
</style>

<div id="app"><div class="MuiPaper-root MuiCard-root MuiBox-root MuiBox-root-2 MuiPaper-elevation1 MuiPaper-rounded">Foo</div></div>

Prod Output:

<style data-jss="" data-meta="MuiBox">
.jss2 {
    background-color: rgb(121, 134, 203);
}
</style>
<style data-jss="" data-meta="MuiPaper">
.MuiPaper-root {
  color: rgba(0, 0, 0, 0.87);
  transition: box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
  background-color: #fff;
}
<!-- ...rest -->
</style>

<div id="app"><div class="MuiPaper-root MuiCard-root MuiBox-root jss2 MuiPaper-elevation1 MuiPaper-rounded">Foo</div></div>

Here you can see the dev build: https://codesandbox.io/s/quizzical-dew-fi3qw

Here you can see the prod build: http://codyschaaf.com/box-demo/

(prod repo: https://github.com/CodySchaaf/box-demo)

Context 🔦

I'm trying to rely more on the Box component instead of makeStyles because of the uncertain future of jss. Also I'm starting to prefer the ease of use that comes with the Box component and its helper shortcuts. But when trying to add styles to existing components it isn't always consistent in its behavior.

Your Environment 🌎

Tech	Version
Material-UI	v4.9.14
React	v16.13.0
Browser	Chrome v81.0.4044.138
TypeScript	3.9.2

[oliviertassinari]

Duplicate #18496