gatsby 빌드시 material-ui의 스타일이 무너져 버렸다.

gatsby에서 개발한 웹 앱을 출시하면 material-ui로 구성한 컴포넌트의 스타일이 무너졌습니다. 아무래도 플러그인을 넣지 않으면 material-ui의 스타일이 무너져 버리는 것 같습니다.
수정 방법을 알았으므로 공유하려고합니다.

스타일 무너짐 수정 방법

1, gatsby-plugin-material-ui 설치
npm install gatsby-plugin-material-ui @material-ui/styles
또는

package.json에 다음과 같이 gatsby-plugin-material-ui 추가
그런 다음 npm install 실행


2, gatsby-config.js에 gatsby-plugin-material-ui 플러그인 정보를 입력해야합니다.

gatsby-config.js에 다음과 같이 gatsby-plugin-material-ui 추가


이제 다시 빌드하면 material-ui css 등의 스타일이 갖추어졌다.
gatsby develop 에서 일어나는 개발 환경에서 스타일이 무너지지 않은 사람도 gatsby serve 로 빌드시의 (실전) 환경이 일어나므로 릴리스 전에는 시험해 두는 것이 좋다고 생각합니다.

참고로 한 사이트