class from `makeStyles` is overridden, only in production build

Current Behavior 😯

I am applying a style to hide an element when the size is lower than the sm breakpoint. This style is applied to a ListItem. When rendered, this overrides the display: flex style that is applied by the MuiListItem-root style. It looks like this:

const useStyles = makeStyles({
  drawerCategory: {
    [theme.breakpoints.down("sm")]: {
      display: "none",
    },
  }
})

const Component = () => {
  const classes = useStyles()

  return (
    <List>
      <ListItem className={classes.drawerCategory}>
        // list stuff blah blah blah
      </ListItem>
    </List>
    )
}

It works great when developing locally on create-react-app. When I build and serve the project (via npm run build && serve -s build -l 4000, or our deploy), the display: "none" is overridden by MuiListItem-root.

Inspector in dev environment:

Inspector in prod environment (I’ve confirmed .jss27 corresponds to makeStyles-drawerCategory-68).

Expected Behavior 🤔

The ListItem’s <li> element should be hidden when the screen is smaller than the sm breakpoint.

The Inspector screenshots from above should look the same, because the drawerCategory class overrides the MuiListItem-root class on the display property.

Steps to Reproduce 🕹

Working on this - it’ll take time to pull from company code. Posting now in case there’s a common pitfall I’m missing here.

Context 🔦

I am trying to hide an element when the screen is smaller than the default sm. This behaves differently between the dev server and a production build.

Your Environment 🌎

I am seeing this behavior on Firefox, Chrome, and Safari.

`npx @material-ui/envinfo`

``` System: OS: macOS 10.15.7 Binaries: Node: 10.23.3 - ~/.nvm/versions/node/v10.23.3/bin/node Yarn: 1.22.0 - /usr/local/bin/yarn npm: 6.14.11 - ~/.nvm/versions/node/v10.23.3/bin/npm Browsers: Chrome: 89.0.4389.82 Edge: Not Found Firefox: 86.0 Safari: 14.0.3 npmPackages: @material-ui/core: ^4.11.3 => 4.11.3 @material-ui/icons: ^4.11.2 => 4.11.2 @material-ui/lab: ^4.0.0-alpha.57 => 4.0.0-alpha.57 @material-ui/styles: 4.11.3 @material-ui/system: 4.11.3 @material-ui/types: 5.1.0 @material-ui/utils: 4.11.2 @types/react: ^17.0.2 => 17.0.2 react: ^17.0.1 => 17.0.1 react-dom: ^17.0.1 => 17.0.1 typescript: ^4.1.5 => 4.1.5 ```

[freedomhero]

Same problem here with next.js & react, any suggestions?

[MattyMags]

Same problem here with next.js & react, is this going to ever be resolved?