CSS is diferent on production build

Hey, I’m using MUI ^4.0.0-alpha.5. When I render a Chip with an Avatar in a dev server the style looks fine, when I do a production build it looks bad. I know that’s vauge, so the difference is that in dev the width is set at 32px and in prod 40px, and the color is overriden in prod.

• [X ] This is not a v0.x issue.
• [ X] I have searched the issues of this repository and believe that this is not a duplicate.

Expected Behavior 🤔

When I render this

const useStyles = makeStyles((theme) => ({
  root: {

    width: `calc(100% - ${theme.spacing(2)}px)`,
    marginBottom: theme.spacing(1),
    marginLeft: theme.spacing(1),
    marginRight: theme.spacing(1),
    border: (props) => `${theme.spacing(0.25)}px solid ${props.item.color}`,
    justifyContent: 'left',
    backgroundColor: 'transparent',
    "&:hover, &:focus, &:active": {
      // backgroundColor: props.item.color
    }
  },
  outlined: {
    // backgroundColor: "transparent"
  },
  avatar: {
    background: (props) => props.selected ? props.item.color : 'transparent',
    border: (props) => `1px solid ${props.item.color}`,
    color: (props) => props.selected ? blue[900] : undefined
  }
}));

let Item = props => {
  return (
    <Chip
      avatar={<Avatar>{props.item.hotKey}</Avatar>}
      onClick={() => props.handleClick(props.item)}
      classes={useStyles(props)}
      label={props.item.name}
      variant={"outlined"}
    />
  );
};

It should like this in dev and production

Current Behavior 😯

But when I do a production build (based on create react app) it looks like this instead

Steps to Reproduce 🕹

I can’t share the full app and am not sure where the fault could be. I’m not sure this is a great issue but am hoping for an idea where to look

Your Environment 🌎

Tech	Version
Material-UI	v3.?.?
React	16.8
Browser	Firefox

[johnraz]

Hi @oliviertassinari, I’ve just been hit by what you describe above and your comment helped me figure out what was happening, thanks for that.

I was naively doing the following in a useStyles.js file expecting to reuse it around the code to avoid the boilerplate:

import { makeStyles } from '@material-ui/styles';
import styles from './styles';

export default makeStyles(styles, { withTheme: true });

This was working in dev but broke on a production build. My “Hook” styles were imported in the middle of the Material-ui styles.

I’m now doing this instead which works in both dev and prod:

import { makeStyles } from '@material-ui/styles';
import styles from './styles';

export default () => {
    return makeStyles(styles, { withTheme: true });
};

Shouldn’t we be adding a note in the documentation about this peculiar behaviour and potential difference between dev / prod? If you can point me to the right place to add this in the doc I would gladly do the writeup.

[talolard]

If hekpful, these are the styles applied to the Avatar in Prod And in Dev