Material ui breaks on refresh in Next js

Question

I have tried adding the babelrc settings in the root directory as suggested by some people but it didn't work. Material ui always seems to break on refresh in next js. Is there a configuration setup I have to do?

applied-styles

breaks-on-refresh

Answer 1

This is probably because your server does not render your styles. Did you try to inject them like the official Mui repo suggests in this example?