I have an older external component library which is still in the process of being migrated from MUI v4 to v5. One of these components which is still using v4 needs to be used in a brand new codebase, which is set up for v5.

The problem is, this external component completely loses all of its styles when I attempt to use it in the newer codebase.

I would like to avoid having to install and set up MUI v4 o this new codebase. Did I miss something in the setup to be able to use components that are still on MUI v4?

Here is a rough sketch of my setup:

Older component from an external library

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

New codebase

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

Usage of the older component in the new codebase

The issue I have here is that in SomeOldComponent, none of its styles set in useStyles are being applied.

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