reactjs - How to use Material-UI ThemeProvider and createGenerateClassName to avoid class name collisions

Question

Wondering if anyone can lay out how one avoids a situation wherein a React application that uses material-ui classNames from makeStyles, and which includes a package that ALSO does that, hence two name generators, results in multiple, conflicting .jss1, .jss2, etc. in the production rendered page that includes both the app's components as well as the included package's.

I have control of both, so I can modify either to have a prefix, but I'm not at all clear on where one injects that into a v4 material-ui project.

Now, I know that createGenerateClassName allows one to pass in a prefix, but it's not clear to me how one injects that into the ThemeProvider. I wrapped the whole thing in a StylesProvider and passed the resulting generateClassName to that, but that seemed to be ignored.

question from:https://stackoverflow.com/questions/65946269/how-to-use-material-ui-themeprovider-and-creategenerateclassname-to-avoid-class

Answer 1

Well, allow me to answer my own question for future generations. Turns out that you can indeed wrap the ThemeProvider with a StylesProvider with a generateClassName argument:

    const generateClassName = createGenerateClassName({
        productionPrefix: 'coreJss'
    });
    ...
    <StylesProvider generateClassName={generateClassName}>
       <ThemeProvider theme={MyTheme}>
          Stuff
       </ThemeProvider>
    </StylesProvider>

Now, your production classNames will be coreJss1, coreJss2... for that package and jss1, jss2...

Now, you might ask 'why didn't yours work in the first place?' and I would tell you to pay close attention to what you actually committed vs. what you typed and didn't save.