Material ui react dom.development.js？61bb:530警告：道具类名称不匹配

react dom.development.js？61bb:530警告：Prop

className

不匹配

服务器：“MuiTypography root makeStyles-root-32 makeStyles-root-47 makeStyles-darkst-27 makeStyles-bodySmall-43 makeStyles-noTextTransform-41 MuiTypography-body1” 客户：“MuiTypography root makeStyles-root-32 makeStyles-root-48 makeStyles-darkst-27 makeStyles-bodySmall-43 makeStyles-noTextTransform-41 MuiTypography-body1”

到目前为止，我已尝试了以下方法，但均无效：

• 在webpack中配置运行时块，因为我们在路由级别进行代码拆分

• 已验证物料界面只有一个版本，最新版本为4.9.3

• 客户端和服务器的节点环境相同

• 尝试使用新的createGenerateClassName在stylesprovider中包装客户端和应用程序：

服务器：

const sheets = new ServerStyleSheets();

      const generateClassName = createGenerateClassName({
        productionPrefix: 'tock',
      });

      const html = ReactDomServer.renderToString(
        sheets.collect(
          <Provider store={store}>
            <StaticRouter location={req.url} context={routerContext}>
              <StylesProvider generateClassName={generateClassName}>
                <Application />
              </StylesProvider>
            </StaticRouter>
          </Provider>
        )
      );

遵循参考实施：

这似乎只发生在开发模式中。如果我捆绑生产并运行应用程序，它就正常工作了

通过：

具体而言，我对以下内容感兴趣：

节点：v13.8.0 网页：4.41.6 材料界面：4.9.3

有趣的是，我们开始看到这个问题的组件使用了一些基于道具的样式：

export const useTypographyStyles = makeStyles((theme) => ({
  root: {
    marginBottom: ({ mb, paragraph }: TypographyProps) =>
      paragraph ? theme.spacing(2) : theme.spacing(mb ?? 0),
  },

我注意到它为钩子中的类生成了2个字符串

root: "makeStyles-root-32 makeStyles-root-232"

是我记录以下结果时得到的结果：

const classes = useTypographyStyles({ mb, paragraph });

---

但是如果我用一个值做一个常规样式，我就不会有问题

我知道这没有多大帮助，但更改触发类名的特定错误对我来说很有用。我有一个名为EmojiWrapper的类，它给出了客户机/服务器差异的错误。所以我重新命名了它，问题就消失了。我认为这与缓存有关

同样发布在material ui github上：我尝试了

与样式

和

createStyles

的组合，但仍然有相同的结果。还有更多信息是，我也在使用webpack编译后端。作为将来的参考，如果您使用Nextjs，它很可能与缓存有关。重新启动您的开发服务器，错误应该会消失。值得一提的是，我在使用next时也遇到了这个问题。但仅在dev上。一旦使用next start部署，就不会遇到这种情况。

root: "makeStyles-root-32 makeStyles-root-232"

const classes = useTypographyStyles({ mb, paragraph });