[Material UI] It looks like there are several instances of `@material-ui/styles` initialized in this application. 경고 메시지 없애기

작성일   2021. 1. 12. 09:47  

Test

Material UI 쓰고 있는데 콘솔 창에 다음과 같은 경고 메시지가 떴다. (갑자기 이런 거 뜨면 신경쓰인다고...)

경고 메시지

It looks like there are several instances of `@material-ui/styles` initialized in this application.
This may cause theme propagation issues, broken class names, specificity issues, and makes your application bigger without a good reason.

See https://material-ui.com/r/styles-instance-warning for more info.

대략 @material-ui/styles의 인스턴스가 여러개 있다는 내용.. 경고 메시지 내에  참고 링크가 있길래  방법대로 따라 해봤는데 그걸로는 해결 못했다.

해결 방법

결국 스택오버플로우에 있던 방법 대로 해봤더니 해결되었다!

1. package.json에서 @material-ui/styles에 대한 dependency 없애기

2. npm i 로 재설치하기

3. 소스 코드 내 import styles from '@material-ui/styles라고 쓴 부분을 찾아서 import styles from '@material-ui/core/styles로 다 바꾸기.

해결 완료!

* 참고 : stackoverflow.com/questions/60846960/material-ui-styles-not-working-in-component-warning-several-instances-of-mat

 

Material UI styles not working in component (warning: several instances of `@material-ui/styles`)

I've created a stand-alone React component that uses the Material UI (4.8.3) library and published this to a private NPM package in order that it can be used in a range of apps. The stand-alone

stackoverflow.com