@mui/styles v5 is not compatible with React 18

Duplicates

• 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

[wiseaidev]

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:

• Convert all your CSS objects into a normal CSS file. For example:

Before: JS component.

export const useStyles = makeStyles((theme) => ({
  root: {
    width: '100%',
  },
  paper: {
    width: '100%',
    marginBottom: theme.spacing(2),
  }
}));

After: CSS file.

.root-table {
  width: 100%;
}

.paper-table {
  width: 100%;
  margin-bottom: 2px;
}

• Import your CSS file into your JS component:

import './styles.css';

• Add the CSS properties to the JS component:

      <div className="root-table">
        <Paper className="paper-table">

• Remove everything related to 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.

[oliviertassinari]

@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.