Estoy trabajando con una aplicación que tiene varios temas. Tiene un tema Material UI que usa MUI v4. También tiene un tema de emoción que utilizan los componentes que no son MUI.

Estaba intentando migrar a MUI v5. MUI v5 usa la emoción bajo el capó.

Declaro el tema MUI más alto en la jerarquía que la emoción.

Por lo que sé, esto da como resultado que algunos componentes de MUI reciban el tema de la emoción (destinado a componentes que no son de MUI) del contexto, lo que rompe su estilo (por ejemplo, falta theme.spacing).

 muiTheme = 1 emotionTheme = 2 <MUIThemeProvider theme={muiTheme}> (from @mui/material/styles) <EmotionThemeProvider theme={emotionTheme}> (from @emotion/react) <MUIComponent> (from @mui/material) // theme => 2 </MUIComponent> </EmotionThemeProvider> </MUIThemeProvider>

¿Hay alguna forma de garantizar que MUI no consuma la instancia de tema incorrecta? Esto daría mucha flexibilidad en lo que respecta a la migración. A largo plazo, no debería ser necesario tener dos temas, pero ahora hay dos temas y hacer toda la refactorización de una sola vez requiere una gran inversión. Al mirar la documentación de MUI, entendí que este no es un caso de uso que la biblioteca admita oficialmente.

Algunos enfoques que he considerado que no parecen valer la pena:

• use styled-components con estilo para el motor con estilo para forzar temas en diferentes contextos
• agregue más declaraciones de proveedores de temas para garantizar que el tema correcto esté en contexto para una parte determinada de la aplicación
• combinar ingenuamente los dos temas para que compartan el mismo objeto temático

Enfoques que sí parecen valer la pena considerar, pero que parecen alterar la propuesta de valor por un margen:

• abandonar la migración a MUI5
• combine el tema MUI4 con el tema de la aplicación antes de migrar a MUI5