Skip to content
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

Merged
merged 4 commits into from
Oct 12, 2021
Merged
Changes from 1 commit
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
44 changes: 44 additions & 0 deletions docs/src/pages/guides/migration-v4/migration-v4.md
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Copy link
Member

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.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I've rephrased it.


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
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

You need to make sure to bump it to v5 so that it has @mui/material as a peer dependency instead.

Is this the only solution? Or is it really about the generateClassName?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Is this the only solution?

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.

Or is it really about the generateClassName?

I am not following.