@mui/styles v5 is not compatible with React 18
See original GitHub issueDuplicates
- I have searched the existing issues
Latest version
- I have tested the latest version
Current behavior 😯
I understood that the latest version 5.6.0 should be compatible with react 18 but when trying to update the dependencies, I get the following error:
npm ERR! Could not resolve dependency:
npm ERR! peer react@"^17.0.0" from @mui/styles@5.6.0
npm ERR! node_modules/@mui/styles
npm ERR! @mui/styles@"5.6.0" from the root project
Expected behavior 🤔
No response
Steps to reproduce 🕹
Steps:
Context 🔦
No response
Your environment 🌎
`npx @mui/envinfo`
System: OS: macOS 12.3.1 Binaries: Node: 16.14.2 - ~/.nvm/versions/node/v16.14.2/bin/node Yarn: Not Found npm: 8.6.0 - ~/.nvm/versions/node/v16.14.2/bin/npm Browsers: Chrome: 100.0.4896.60 Edge: Not Found Firefox: Not Found Safari: 15.4
Issue Analytics
- State:
- Created a year ago
- Reactions:2
- Comments:7 (3 by maintainers)
Top Results From Across the Web
MUI installation doesn't work with React 18 - Stack Overflow
Note: if anyhow MUI v5 does not work with react@17.0.x then install MUI (version) v4. npm install @mui/material @emotion/react @emotion/styled.
Read more >@mui/styles (LEGACY) - MUI System
@mui/styles is not compatible with React.StrictMode or React 18. MUI aims to provide a strong foundation for building dynamic UIs.
Read more >@mui/styles - npm
MUI Styles - The legacy JSS-based styling solution of Material UI. ... You can leverage our styling solution, even if you are not...
Read more >@mui/styles | Yarn - Package Manager
You can leverage our styling solution, even if you are not using our components. Installation. Install the package in your project directory with:...
Read more >Material ui, react 18 : r/reactjs - Reddit
Material UI v4 to v5 was a major change, yes. ... Supported react 18 state management libraries will not have this issue.
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
Hey @devhyunjae, It seems like it won’t add support for react v6. Therefore, I have found a workaround for this issue by following the steps below:
Before: JS component.
After: CSS file.
mui/styles
.This way, it will apply the CSS properties to your JS component. I don’t think this is the best approach to mitigate this issue. At least, it is working for now.
@WalterWeidner The main issue I’m aware of is related to the change that React introduced in v18. Components can now render twice or start rendering but never mounts. I mean that CSS can be added on the page with a
<style>
element but not be clean-up when unmounted. This is because of the wrong React primitives@mui/styles
rely on. This is problematic when adding global styles with@global
because this has a global effect, which you can’t disable when you amount the component.SSR might also come with issues, the hydration of the class names might fail because of different in the class name counter.