gpt4 book ai didi

material-ui - react dom.development.js?61bb :530 Warning: Prop className did not match

转载 作者:行者123 更新时间:2023-12-04 04:17:36 26 4
gpt4 key购买 nike

react-dom.development.js?61bb:530 警告: Prop className 不匹配。

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

到目前为止,我已经尝试了以下方法但无济于事:

  • 在 webpack 中配置运行时 block ,因为我们在路由级别进行代码拆分,
optimization: {
runtimeChunk: {
name: 'app',
},
},
  • 验证material-ui只有一个版本,最新,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>
)
);

以及确保在每次请求时创建新的 ServerStyleSheets

客户:

const generateClassName = createGenerateClassName({
productionPrefix: 'tock',
});
try {
(fullRender ? ReactDOM.render : ReactDOM.hydrate)(
<StrictMode>
<Provider store={store}>
<Router history={tockHistory}>
<StylesProvider generateClassName={generateClassName}>
<Routes />
</StylesProvider>
</Router>
</Provider>
</StrictMode>,
document.querySelector('#Root')
);
} catch (e) {
// eslint-disable-next-line no-console
console.error(e);
throw e;
}

遵循引用实现: https://material-ui.com/guides/server-rendering/

这似乎只发生在开发模式中。如果我捆绑生产并运行该应用程序,它就可以工作。

经历过: https://material-ui.com/getting-started/faq/#my-app-doesnt-render-correctly-on-the-server

具体而言,我对此感兴趣: https://material-ui.com/getting-started/faq/#react-class-name-hydration-mismatch

节点:v13.8.0网络包:4.41.6 Material -ui:4.9.3

有趣的是,我们开始看到这个问题的组件使用了一些基于 prop 的样式:

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

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

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

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

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

但是如果我在那里做一个只有一个值的常规样式,我就不会遇到这个问题。

最佳答案

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

关于material-ui - react dom.development.js?61bb :530 Warning: Prop className did not match,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60289525/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com