Bug report

Describe the bug

When using Material-UI components, the import order the related css within output html is not static. This outputs inconsistent styling due to inconsistent overrides.

Affected by three different situations

1. Whether we are using destructuring to import the components or direct imports

import Button from '@material-ui/core/Button'
import Typography from '@material-ui/core/Typography'

have different results than

import { Button, Typography } from '@material-ui/core'

2. The order of direct imports

import Button from '@material-ui/core/Button'
import Typography from '@material-ui/core/Typography'

have different results to

import Typography from '@material-ui/core/Typography'
import Button from '@material-ui/core/Button'

3. Prod vs dev
   yarn dev have different results to yarn build && yarn start

To Reproduce

Steps to reproduce the behavior, please provide code snippets or a repository:

1. Clone https://github.com/karpkarp/mui-next-repo
2. Run in Dev vs Prod to see difference
3. Change component import in /src/SideNav.component.tsx and run in Prod to see difference
   change

import { Button, Typography } from '@material-ui/core'

to

import Button  from '@material-ui/core/Button'
import Typography from '@material-ui/core/Typography'

4. Change import order and run in Prod to see difference

import Button  from '@material-ui/core/Button'
import Typography from '@material-ui/core/Typography'

to

import Typography from '@material-ui/core/Typography'
import Button  from '@material-ui/core/Button'

Expected behavior

There an expectation for a static order of css load order on the HTML. The lack of it makes development very tedious and unpredictable in styling overrides.

Screenshots

Using dev

Using prod

System information

• OS: MacOS
• Browser: Chrome
• Version of Next.js: 9.4.4
• Version of Node.js: v10.16.0