-
Notifications
You must be signed in to change notification settings - Fork 29.2k
Open
Labels
WebpackRelated to Webpack with Next.js.Related to Webpack with Next.js.bugIssue was opened via the bug report template.Issue was opened via the bug report template.
Milestone
Description
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
- 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'
- 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'
- Prod vs dev
yarn dev
have different results toyarn build && yarn start
To Reproduce
Steps to reproduce the behavior, please provide code snippets or a repository:
- Clone https://github.com/karpkarp/mui-next-repo
- Run in Dev vs Prod to see difference
- 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'
- 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
System information
- OS: MacOS
- Browser: Chrome
- Version of Next.js: 9.4.4
- Version of Node.js: v10.16.0
petermikitsh, fabinppk, francisrod01, altras, simonkberg and 3 more
Metadata
Metadata
Assignees
Labels
WebpackRelated to Webpack with Next.js.Related to Webpack with Next.js.bugIssue was opened via the bug report template.Issue was opened via the bug report template.