5

I have migrated my project from v4 to v5, I am only using sx prop. I have not installed @emotion/react and everything is working fine. Is there any reason to install @emotion/react and @emotion/styled? because I havent install it and everything is running good.

"@mui/icons-material": "^5.0.1",
"@mui/lab": "^5.0.0-alpha.48",
"@mui/material": "^5.0.1",
NearHuscarl
  • 66,950
  • 18
  • 261
  • 230
elam
  • 83
  • 1
  • 7

1 Answers1

5

If you install MUI packages without extra configuration, you're using the default style engine powered by emotion, as opposed to the other official style engine that uses styled-component which needs more setup.

To use the default style engine, you need to install the 2 emotion packages as outlined in the installation guide:

npm install @mui/material @emotion/react @emotion/styled

Even when you only use the MUI icons from @mui/icons-material package, you also need the above 2 packages as explained in this answer. The only reason I can think why you don't have any error is because you're not using any MUI components yet, or you're using some unstyled components like the UnstyledButton which is a raw component that doesn't have any styles applied to it.

Edit: The reason why you can install @mui/material without emotion is because it's already installed by @hookform/devtools package as seen from the package.json here. If you uninstall both packages and only reinstall @mui/material, it will complain about missing emotion dependencies again.

npm un @mui/material @mui/lab @mui/icons-material @hookform/devtools
npm i @mui/material @mui/lab @mui/icons-material
NearHuscarl
  • 66,950
  • 18
  • 261
  • 230
  • Hi! Thank you for your response. I am using MUI components like such as: import { Box } from '@mui/material'; import { Button, Grid } from '@mui/material'; (using sx prop only for the styling.) I deleted node_modules and npm install again, but everything is running good with no errors, so it is weird I didnt need to install those 2 packages. – elam Oct 22 '21 at 18:28
  • @elam does it work for you? – NearHuscarl Oct 22 '21 at 18:30
  • Sorry, I updated my answer. I am using MUI components like buttons, grids, only with sx prop for the styling and everything is running as expected, I just wanted to know why I do not need to install those 2 packages. If I install them , also everything is working fine. I have even tried to delete node modules and reinstall packages again, and everything is good. It is weird. – elam Oct 22 '21 at 18:37
  • @elam can you add your `package-lock.json`? – NearHuscarl Oct 22 '21 at 18:44
  • Of course, my package-lock.json [link]: (shorturl.at/zBCZ1) and my package.json [link]: (shorturl.at/ampFL) Please tell me if you find anything "weird". Thank you. – elam Oct 22 '21 at 18:59
  • @elam can you give me a list of commands you use to create the project? what npm version are you using? – NearHuscarl Oct 24 '21 at 15:28
  • Of course, npm version: 6.14.15 node version: 14.18.1 I am using windows 11 and created the project by using: npx create-react-app my_app – elam Oct 25 '21 at 02:42
  • @elam can you put your devDependencies here too? I'm running out of idea now. You're using npm v6, which should not [auto install](https://stackoverflow.com/a/35207983/9449426) peer dependencies (emotion packages are peer dependencies of @mui/material package) – NearHuscarl Oct 25 '21 at 02:51
  • Also, there are no error on my console log while developing my app. I deleted node modules and package-lock and npm install again, but everything is working great , it's weird I though @emotion packages were necessaries. – elam Oct 25 '21 at 03:23
  • Here is my entire package.json file: https://pastebin.com/2CnNkrb4 – elam Oct 25 '21 at 03:25
  • Here is one of the custom components I use using @mui/material Button and Grid. https://pastebin.com/vVmN2ejt – elam Oct 25 '21 at 03:28
  • 1
    @elam unrelated but you can use [`LoadingButton`](https://stackoverflow.com/a/69309533/9449426) in v5 – NearHuscarl Oct 25 '21 at 03:32
  • 1
    @elam found the problem, see my updated answer :D – NearHuscarl Oct 25 '21 at 04:04
  • For some reason I did not know dependencies of my dependencies were directly connected to my main project. I just added those @emotion packages directly to my package.json. Thank you so much for teaching me something new today! – elam Oct 25 '21 at 06:58