React - Next - Material ui Warning: Prop className did not match

Warning: Prop className did not match

Next js에 Material ui를 setting 할 때, 문제점이 발생했다. 처음 켤때는 아무런 문제가 없지만 새로고침을 하거나 다른 페이지를 이동하동 하다보면 콘솔에 위와 같은 message가 발생한다. 이것을 해결하고자 google을 열심히 뒤져서 해결을 할 수 있었다. 우선 먼저 찾아 볼수 있는 페이지는 Material ui 공식문서 사이트 이다. 여기서 이문제가 왜 발생하고 있는지 잘 설명되어 있다.

material-ui.com/guides/server-rendering/

Server Rendering - Material-UI

여기서 설명한것을 읽어보면 SSR에서 이미 HTML과 CSS를 같이 inject(같이 쏴줘서) 다른 페이지로 이동할 때 flicker가 원인이라고 한다. 그래서 이것을 해결하기 위해서 server.js를 만들어서 사용하라고 되어 있지만, 이것으로는 해결하기 어려웠다.

그래서 google을 더욱 찾아보니 _document.js에서 설정을 해주면 해결할 수 있었다.

stackoverflow.com/questions/50685175/react-material-ui-warning-prop-classname-did-not-match

React + Material-UI - Warning: Prop className did not match

제일 마지막에 있는 댓글 silva 아저씨 댓글을 읽어보면 해결할 수 있었다. 주석도 잘되어 있어서 이해는데 도움 되었다.