Warning: Prop className did not match. Server generate classes ID difference than Client classes ID

[nurbeknurjanov]

Material Ui 5 version has problem with SSR

Here is error:

Warning: Prop className did not match. Server generate classes ID difference than Client classes ID

• I have used this example, to solve this problem (https://github.com/mui-org/material-ui/tree/master/examples/nextjs)

But it doesn't help for Mui 5 version.
It helps to Mui 4 version.
But not to Mui 5 version.

Here is example of code

const style = (theme)=>{
return {
example: {
//background: 'yellow' , //this works
background: props => props.bgColor ? props.bgColor: 'yellow' , //this doesn't work
},
};
};
const StyledButton = withStyles(style)(
({classes, bgColor, ...props})=><Button className={classes.example} {...props}/>
);

It works fine if I don't use props like bgColor.
If here is background:'yellow'

But if there is props condition like this
background: (props:BgColorType) => props.bgColor ? props.bgColor: 'yellow' , //this doesn't work

[nurbeknurjanov]

I have tried this as you recommend

MyDocument.getInitialProps = async (ctx) => {

const originalRenderPage = ctx.renderPage;
const cache = createEmotionCache();
const { extractCriticalToChunks } = createEmotionServer(cache);

ctx.renderPage = () =>
originalRenderPage({
enhanceApp: (App) => (props) => <App emotionCache={cache} {...props} />,
});

const initialProps = await Document.getInitialProps(ctx);
const emotionStyles = extractCriticalToChunks(initialProps.html);
const emotionStyleTags = emotionStyles.styles.map((style) => (
<style
data-emotion={${style.key} ${style.ids.join(' ')}}
key={style.key}
dangerouslySetInnerHTML={{ __html: style.css }}
/>
));

return {
...initialProps,
styles: [...React.Children.toArray(initialProps.styles), ...emotionStyleTags],
};
};

But this doesn't help for Mui 5 version

[mnajdova]

But it doesn't help for Mui 5 version.
It helps to Mui 4 version.
But not to Mui 5 version.

It's hard to follow what you mean by this. Do you see the error in v5 or v4? If it is happening in v4 it is likely duplicate. See #26876

[nurbeknurjanov]

But it doesn't help for Mui 5 version.
It helps to Mui 4 version.
But not to Mui 5 version.

It's hard to follow what you mean by this. Do you see the error in v5 or v4? If it is happening in v4 it is likely duplicate. See #26876

No, the error happens in v5.
v4 is ok.

And your suggestion for v5 https://github.com/mui-org/material-ui/tree/master/examples/nextjs, it doesn't help.
Error is still there, even if I try example of next for v5.

Am I managed to explain ??

[nurbeknurjanov]

To Arseny, yes it is, it is a dupplicate of bug of this open ticket
#27512

Here is a sandbox example to see the bug

https://codesandbox.io/s/charming-rain-oswex?file=/pages/index.js

[eps1lon]

Closing in favor of #27512