Tengo una biblioteca de componentes externos más antigua que todavía está en proceso de migración de MUI v4 a v5. Uno de estos componentes que todavía usa v4 debe usarse en una base de código completamente nueva, que está configurada para v5.

El problema es que este componente externo pierde por completo todos sus estilos cuando intento usarlo en el código base más nuevo.

Me gustaría evitar tener que instalar y configurar MUI v4 o este nuevo código base. ¿Me perdí algo en la configuración para poder usar componentes que todavía están en MUI v4?

Aquí hay un boceto aproximado de mi configuración:

Componente más antiguo de una biblioteca externa

 import { Grid, Button, makeStyles } from '@material-ui/core' const useStyles = makeStyles((theme) => ({ gridRoot: { // a bunch of styles }, buttonRoot: { // more styles } })) const SomeOldComponent = () => { const classes = useStyles() return ( <Grid classes={{ root: classes.gridRoot }}> I am an old component from an external library. I still use MUI v4. <Button classes={{ root: classes.buttonRoot }}>Some button</Button> </Grid> ) } export default SomeOldComponent

Nuevo código base

 import React from "react" import { ThemeProvider } from "@mui/material/styles" import { StylesProvider, createGenerateClassName } from '@mui/styles' import { createTheme } from "./myTheme" const classNameOpts = { productionPrefix: '', disableGlobal: true, seed: 'mySeed', } const generateClassName = createGenerateClassName(classNameOpts) export const ApplicationWrapper = ({ children }) => ( <StylesProvider generateClassName={generateClassName}> <ThemeProvider theme={createTheme()}>{children}</ThemeProvider> </StylesProvider> ) export default ApplicationWrapper

Uso del componente anterior en la nueva base de código

El problema que tengo aquí es que en SomeOldComponent , ninguno de sus estilos establecidos en useStyles se está aplicando.

 import { Grid, Button } from '@mui/material' import SomeOldComponent from 'external-library' const MyComponent = () => { return ( <Grid> I am a new component in a new MUI v5 only codebase <SomeOldComponent/> <Button>Do something!</Button> </Grid> ) } export default MyComponent