-
-
Notifications
You must be signed in to change notification settings - Fork 32.3k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
[docs] Add troubleshooting guide for unexpected styles #28907
Changes from 1 commit
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -2776,3 +2776,47 @@ The root cause of this error comes from accessing empty theme. Make sure that yo | |
- Make sure that no `useStyles` is called outside of `<ThemeProvider>`. If you have, consider fixing it like [this suggestion](#makestyles-typeerror-cannot-read-property-drawer-of-undefined) | ||
|
||
For more details, [checkout this issue](https://github.com/mui-org/material-ui/issues/28496) | ||
|
||
### Styles broken after migrating to v5 | ||
|
||
There are two reasons why the styles of the components may be migrated. | ||
|
||
First, check if you have configured the `StyledEngineProvider` correct as shown in the [Style library](#style-library) section. | ||
|
||
If the `StyledEngineProvider` is already used at the top of your application and the styles are still broken, it may be the case that you still have `@material-ui/core` in your application. | ||
It may be coming from some of the dependencies that you have, that still depend on `@material-ui/core` (v4). | ||
|
||
The easiest way to check this is to search in your lock file (`package-lock.json` or `yarn.lock` depenending on what you are using) for the string "@material-ui/core". | ||
If you find it there, check which dependency depend on it, and make sure you upgrade that dependency to the version that supports v5. | ||
|
||
Here is one example: | ||
|
||
**package-lock.json** | ||
|
||
```json | ||
... | ||
"node_modules/@mui/x-data-grid": { | ||
"version": "4.0.1", | ||
"resolved": "https://registry.npmjs.org/@mui/x-data-grid/-/x-data-grid-4.0.1.tgz", | ||
"integrity": "...", | ||
"dependencies": { | ||
... | ||
}, | ||
"peerDependencies": { | ||
"@material-ui/core": "^4.12.0 || ^5.0.0-beta.0", | ||
} | ||
}, | ||
... | ||
"@material-ui/core": { | ||
"version": "4.12.3", | ||
"resolved": "https://registry.npmjs.org/@material-ui/core/-/core-4.12.3.tgz", | ||
"integrity": "...", | ||
"peer": true, | ||
"requires": { | ||
... | ||
} | ||
}, | ||
... | ||
``` | ||
|
||
In this `package-lock.json` file you can notice that `@mui/x-data-grid` has `@material-ui/core` in it's `peerDependencies`. You need to make sure to bump it to v5 so that it has `@mui/material` as a peer dependency instead. | ||
mnajdova marked this conversation as resolved.
Show resolved
Hide resolved
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more.
Is this the only solution? Or is it really about the There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more.
I am trying to give info on a scenario where some dependency has @material-ui/core as a peer dependency. What other solution is available? This is one example, there can be other packages that have @material-ui/core as a dependency.
I am not following. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I find this confusing. What are the actual symptoms? I have tried to follow the comments but I couldn't get a clear picture about what is going on.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I've rephrased it.