search

mui / material-ui

Material UI: Comprehensive React component library that implements Google's Material Design. Free forever.
https://mui.com/material-ui/
MIT License
93.73k stars 32.24k forks source link

Don's mutate the theme object in ThemeProvider. #33242

Open LvChengbin opened 2 years ago

LvChengbin commented 2 years ago

Duplicates

Latest version

Current behavior 😯

ThemeProvider try adding a property Symbol( mui.nested ) to the original theme object.

https://github.com/mui/material-ui/blob/7c75acec84879d013ae8e68ff319baf9fef1045e/packages/mui-private-theming/src/ThemeProvider/ThemeProvider.js#L58

It causes error while using some state management libraries, such a Recoil, to manage theme objects, because the libraries may freeze objects they are handling, then Error Object is not extensible will be thrown.

On the other hand, changing origin object will also cause other side effects.

Expected behavior 🤔

Don't change the original object.

Steps to reproduce 🕹

Steps:

1. 2. 3. 4.

Context 🔦

No response

Your environment 🌎

npx @mui/envinfo ``` Don't forget to mention which browser you used. Output from `npx @mui/envinfo` goes here. ```
michaldudak commented 2 years ago

Would you like to create a PR to improve it?

oliviertassinari commented 2 years ago

For context, this logic is only here for backward compatibility with v4. It makes it possible for JSS to generate global class names unless themes are nested.

https://github.com/mui/material-ui/blob/b63d4813c4c2a166ad33a78c6dc5730f79983df8/packages/mui-styles/src/createGenerateClassName/createGenerateClassName.js#L61

We can drop the logic in v6 as we drop @mui/styles.