如何使用Material-UI ThemeProvider和createGenerateClassName避免类名冲突 [英] How to use Material-UI ThemeProvider and createGenerateClassName to avoid class name collisions

问题描述

想知道是否有人可以安排如何避免这样的情况：使用来自makeStyles的Material-UI classNames的Reaction应用程序，并且包含也执行此操作的包(因此有两个名称生成器)，会在既包含应用组件又包含包含包的生产呈现页面中产生多个冲突的.jss1、.jss2等。

我对这两个都有控制权，所以我可以修改它们中的任何一个来添加前缀，但是我完全不清楚应该在哪里将前缀注入到v4 Material-UI项目中。

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

推荐答案

好吧，请允许我为子孙后代回答我自己的问题。原来您确实可以用带有GenerateClassName参数的StylesProvider包装ThemeProvider：

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

现在，您的生产classNames将是该软件包的coreJss1, coreJss2...和jss1, jss2...

现在，你可能会问‘为什么你的手机一开始就不管用？’我要告诉您，要密切关注您实际提交的内容与您键入但未保存的内容。

这篇关于如何使用Material-UI ThemeProvider和createGenerateClassName避免类名冲突的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！