MUI v5：我是否需要安装 @emotion/react 或 @emotion/styled 才能使用 sx 道具？

Question

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

Answer 1

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.

Answer 2

You need both of them as per the installation guide

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

// with yarn
yarn add @mui/material @emotion/react @emotion/styled