[migration] How to solve conflict between my project using v5 and third-party packages using v4?

[RandyLiu6410]

My project has just been updated to Mui v5 (https://mui.com/). And one of used package react-page (https://github.com/react-page/react-page) in the project uses Mui v4 (https://v4.mui.com/). And some conflicts just showed up. When I use the module importing the react-page, the style sheet of mui v4 covered the current style sheet of mui v5. How can I prevent mui v4 from covering all style sheets and make sure mui v5 is still working as before?

[embeddedt]

I have the same question. I'm considering upgrading to MUI v5, but one of my dependencies still relies on Material-UI v4 (and likely won't be updated soon), so I won't be able to upgrade unless the two versions can run side-by-side.

[RandyLiu6410]

I solved by generating prefix classname of v4 components.

`import * as React from 'react';
import { StylesProvider, createGenerateClassName } from '@material-ui/styles';

const generateClassName = createGenerateClassName({
productionPrefix: 'c',
});

export default function App() {
return ...;
}`

[embeddedt]

Thanks, this worked for me. It also appears to match the official approach recommended for the opposite scenario (third-party v5 dependency in a v4 project): https://mui.com/components/data-grid/migration-v4/

[Goytai]

Thanks guys, this worked for me too.

[github-actions]

This issue has been closed. If you have a similar problem but not exactly the same, please open a new issue.
Now, if you have additional information related to this issue or things that could help future readers, feel free to leave a comment.