Encountering an issue with React Apps imported as microfrontends. Our Landingpage (built in React/MUI) imports multiple Apps (created in React/MUI v4 or v5, designed to run independently with their own themes). The problem arises when each App creates its own theme and sets different base rules for Mui CSS classes (e.g. .MuiGrid-container). The process of switching between Apps on the Landingpage seems to unfold as follows:
- Landingpage loads its theme.
- App 1 is loaded and applies its theme.
- App 2 is loaded and introduces its own theme, potentially overriding some rules from App 1 (which is not visible at this point).
- App 1 is reloaded, replacing its previous theme, allowing App 2's theme to take precedence due to the CSS rule order.
We have control over our own App, but not the Landingpage; thus, it is App 2's theme affecting our App 1.
A potential solution could involve namespace our theme, adding a prefix class to every CSS rule emitted by our App to enhance specificity and prevent interference with other Apps. However, we couldn't find any options in createTheme or <ThemeProvider> that address this issue.
The question now is: How do we namespace our React/MUI v5 Theme?
Specifically, we aim to create a theme like this:
createTheme(
{
palette: palette,
components: {
MuiGrid: {
styleOverrides: {
container: {
flexWrap: "nowrap",
},
},
},
},
}
)
and implement it in the App using
<ThemeProvider theme={resultOfCreateTheme}>.ourNamespaceElementClassName .MuiGrid-container {
flex-wrap: nowrap;
}
Currently, it outputs
.MuiGrid-container {
flex-wrap: nowrap;
}
potentially causing conflicts if multiple Apps follow suit.
Suggestions for alternative approaches are also appreciated, as there might be a different underlying issue here. With no authority over the Landingpage or Apps 2..n, we must "theme-proof" our own App 1 somehow.