Style changes throughout the app when chonky is added

[masoudjapalaghi]

Hi, in the next js project, where I use mui, when I add chonky, all the styles of my page change and it crashes. Do you have any idea why this is happening?

"dependencies": { "@emotion/cache": "latest", "@emotion/react": "latest", "@emotion/server": "latest", "@emotion/styled": "latest", "@mui/material": "latest", "@mui/styled-engine-sc": "^5.1.0", "@mui/styles": "^5.2.3", "@reduxjs/toolkit": "^1.7.1", "@tinymce/tinymce-react": "^4.0.0", "axios": "^0.25.0", "chonky": "^2.3.2", "chonky-icon-fontawesome": "^2.3.2", "clsx": "latest", "eslint": "7.32.0", "eslint-config-next": "12.0.7", "jss": "^10.9.0", "jss-rtl": "^0.3.0", "next": "^12.1.4", "next-intl": "^2.6.0", "prop-types": "latest", "react": "^18.0.0-rc.3", "react-dom": "^18.0.0-rc.3", "react-redux": "^7.2.6", "react-toastify": "^9.0.0-POC", "stylis": "^4.0.13", "stylis-plugin-rtl": "^2.1.1", "swiper": "^8.0.7" },

[embeddedt]

You likely have mismatched dependencies between Chonky and the rest of your project. This causes there to be two versions of packages like JSS, Material UI, etc. which can cause issues. Try using the same versions of packages that Chonky does (e.g. downgrade to React 17) and see if that fixes the problem.

[JMGonzalezR]

Use the classNameGenerator from material, so you can change the default prefix of the classes generated by MUI on your app, that will stop the overriede

[bawa]

We observe the same behavior - chonky changes global styles of our app and everything crashes. Did you find a way for solving this @masoudjapalaghi ?

[wil-se]

patched here