Can component styles be scoped instead of inline to prevent overwriting by multiple React apps on the same page?

user_4517586 0
Viewed 243

I have an app with html:

<div id="react-root-navbar"></div>
<div id="react-root-body"></div>

and corresponding React components that call React.DOM.render on each div.

Both React components use Material UI components. Thus, a set of inline styles are injected for each component.

The problem is that all styles for the second component will be further down in the HTML than for the first component, thus these CSS rules will be higher priority. This interrupts the intended cascading flow and results in lots of incorrect styling. For example, .MuiAppBar-colorPrimary is overruled by .MuiPaper-root:

screenshot of interrupted cascading

I know that the ideal solution would be to have all components within a single React app and prevent duplciate imports in the first place. This isn't possible with the codebase I'm working with, however, which uses a Django frontend migrating one piece at a time to React.

Is there any way to make the styling exported by Material UI for each component scoped specifically to that component, so that the styles do not overwrite each other?

material-ui reactjs
1 Answers

MUI has a component StylesProvider that allows you to adjust how styles are added. StylesProvider has a prop generateClassName to which you can pass a generator to determine how class names are generated.

You can create a generator using a MUI function createGenerateClassName, to which you can pass the option disableGlobal to add simple suffixes to class names so that each app will have scoped CSS applied to it.

I was already wrapping all MUI components in a component MUIThemeProvider to use the MUI component ThemeProvider. I just added StylesProvider to this wrapper:

const generateClassName = createGenerateClassName({
    disableGlobal: true,
});

return (
    <StylesProvider generateClassName={generateClassName}>
        <ThemeProvider theme={theme}>
            {props.children}
        </ThemeProvider>
    </StylesProvider>
)
user_45175860
Related