Material-ui: CSS is diferent on production build

[talolard]

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|

[talolard]

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

And in Dev

[oliviertassinari]

@talolard We can't help without a simplified reproduction. I have no idea what's wrong.

[talolard]

Ok. I'll try to put one together over the weekend or otherwise close the issue.
Thanks!

[oliviertassinari]

From your screenshot, the injection order is inverted. The injection order of the CSS depends on the makeStyles creation order. Maybe it can help.`

[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.

[oliviertassinari]

@johnraz I'm surprised the behavior is different between dev and prod. I agree, we should explain how the injection works between two components. What do you think of this location? https://next.material-ui.com/css-in-js/advanced/#css-injection-order

Thank you for your interest in it!

Why are you using the withTheme option?

[johnraz]

Yes I was actually surprised as well by the prod build failing on this and it took me some time to figure it out.
In the end it's a good thing because I learnt a lot 😄

Thank you for the documentation pointer, I should have some spare time tomorrow to look at it 👍

Why are you using the withTheme option?

I'm really just getting started with MUI on a brand new project, the theme feature was used in one of the example I started from. Then I figured it would be nice to have a way to setup light/dark theme or something at some point but I don't really know much of what it gives me yet, to be honest.
Is there anything wrong/weird about using a theme?

[oliviertassinari]

@johnraz Sounds like a plan 👍 . You can do this change, it should be identical.

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

[johnraz]

Oh! I see what you meant now, I think I introduced that because of another bug I had. I basically mixed up imports between @material-ui/styles and @material-ui/core/styles and probably tried withTheme when trying to make it all work... It does indeed work without it 👍
Thanks a ton for the pointer.

[sirajalam049]

I don't know what fix yo guys have pushed, but I'm still having the exact same problem.

[johnraz]

@sirajalam049 AFAIK there is no fix - in my case it was related on the way I was using makeStyles it's all explained above. Your issue could be completely different though.

[sirajalam049]

Oh, I thought #15234 was a fix for that. BTW I tried your fix too, but it is not the case. Seems like the issue was not supposed to be closed.

Development Server

---

Production Server

[johnraz]

Well it worked for me, as I said you may as well be facing another problem having the same consequence. I believe you are better off creating a new issue with a proper explanation and description of the context in which you are experiencing this.

[sirajalam049]

I appended my screenshots and seems like the Author has given an explanation of problem same I am facing. If I too open a new issue, I would write the same things as the Author has written, so it would be duplicate. Still, I can open a new issue if you insist.

[johnraz]

I'm just providing advices which I believe would help you to get the proper feedback. If you believe otherwise that's also fine by me. I'm not insisting on anything, I'm really just trying to help you.

Now just to be sure we are on the same page, I was experiencing the exact same issue as the original poster and fixed it by fixing the order in which I was calling makeStyles.
Without seeing your code it's quite hard to tell.

That's why you should setup a codesandbox with a simple reproduciton (as @oliviertassinari asked for here btw https://github.com/mui-org/material-ui/issues/15214#issuecomment-480283693).

Whether you post here or in new issue is not that of a big deal, I was just thinking it would help you get more views by opening a new issue than commenting on a long time closed one.

[sirajalam049]

Ok, thanks for quick responses and help. I will open a new issue and add a code sandbox minimal project. But to replicate it, one has to build the project, which I don't know which is possible to do in code sandbox. For convenience, I will make a new react project and put it on GitHub so that it is easier for you guys to check in dev as well as in build mode.

[oliviertassinari]

@sirajalam049 See #16374