如何使用 Material-UI ThemeProvider 和 createGenerateClassName 避免类名冲突

Question

想知道是否有人可以说明如何避免使用 makeStyles 中的 material-ui classNames 的 React 应用程序，其中包含一个包也这样做，因此两个名称生成器会导致多个冲突的 .jss1， .jss2 等在生产渲染页面中，包括应用程序的组件以及包含的包。

我可以控制这两者，所以我可以修改其中一个前缀，但我完全不清楚将其注入 v4 material-ui 项目的位置。

现在，我知道 createGenerateClassName 允许传入前缀，但我不清楚如何将其注入 ThemeProvider。我将整个东西包装在 StylesProvider 中，并将生成的 generateClassName 传递给它，但这似乎被忽略了。

Answer 1

好吧，请允许我为后代回答我自己的问题。事实证明，您确实可以使用带有 generateClassName 参数的 StylesProvider 包装 ThemeProvider：

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

现在，该包的生产类名称将是 coreJss1, coreJss2... 和 jss1, jss2...

现在，您可能会问“为什么您的一开始就不起作用？”我会告诉您密切注意您实际提交的内容与您输入但未保存的内容。