CODEWITHSUNDEEP
reactjsmaterial-ui
elam
elam

Reputation: 93

MUI v5: Do I need to install @emotion/react or @emotion/styled to use sx prop?

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",

Upvotes: 6

Views: 5472

Answers (1)

NearHuscarl
NearHuscarl

Reputation: 81340

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

Upvotes: 5

Related Questions