Estoy tratando de usar complementos jss personalizados con React MUI 5.1.0 Antes con MUI 4 usé StylesProvider para pasar el jss como:

 import React from 'react' import ReactDOM from 'react-dom' import { StylesProvider, jssPreset, ThemeProvider } from '@material-ui/core/styles' import increaseSpecificity from 'jss-increase-specificity' import { create } from 'jss' import App from './App' import theme from './materialUi/mainTheme' const jss = create({ plugins: [...jssPreset().plugins, increaseSpecificity({ repeat: 3 })], }) ReactDOM.render( <StylesProvider jss={jss}> <ThemeProvider theme={theme}> <App /> </ThemeProvider> </StylesProvider>, document.getElementById('root'), )

y eso estaba funcionando. Pero después de la migración al componente v5 parece

 import React from 'react' import ReactDOM from 'react-dom' import { ThemeProvider } from '@material-ui/core/styles' import { StylesProvider, jssPreset } from '@mui/styles' import increaseSpecificity from 'jss-increase-specificity' import { create } from 'jss' import App from './App' import theme from './materialUi/mainTheme' const jss = create({ plugins: [...jssPreset().plugins, increaseSpecificity({ repeat: 3 })], }) ReactDOM.render( <StylesProvider injectFirst jss={jss}> <ThemeProvider theme={theme}> <App /> </ThemeProvider> </StylesProvider>, document.getElementById('root'), )

Y complemento personalizado no adjunto

(Contexto: estoy tratando de aumentar la especificidad de mis estilos MUI porque mi aplicación de reacción se usa como un complemento de WordPress, por lo que necesito anular los estilos WP actuales)