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

【问题标题】：MUI v5: Do I need to install @emotion/react or @emotion/styled to use sx prop?MUI v5：我是否需要安装 @emotion/react 或 @emotion/styled 才能使用 sx 道具？
【发布时间】：2021-12-08 20:25:32
【问题描述】：

我已将我的项目从 v4 迁移到 v5，我只使用 sx 道具。我还没有安装@emotion/react，一切正常。有什么理由安装@emotion/react 和@emotion/styled？因为我还没有安装它，一切都运行良好。

"@mui/icons-material": "^5.0.1",
"@mui/lab": "^5.0.0-alpha.48",
"@mui/material": "^5.0.1",

【问题讨论】：

你能分享一下你的代码吗？

标签： reactjs material-ui

【解决方案1】：

如果您在没有额外配置的情况下安装 MUI 包，则您使用的是由情感驱动的默认样式引擎，而不是使用需要更多设置的 styled-component 的其他官方样式引擎。

要使用默认样式引擎，您需要安装installation guide中列出的2个情感包：

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

即使您只使用 @mui/icons-material 包中的 MUI 图标，您也需要上述 2 个包，如 this 答案中所述。我能想到你没有任何错误的唯一原因是因为你还没有使用任何 MUI 组件，或者你正在使用一些无样式的组件，比如 UnstyledButton 这是一个没有任何错误的原始组件应用于它的样式。

编辑： 之所以可以毫无感情地安装@mui/material，是因为它已经被@hookform/devtools 包安装，从这里的package.json 可以看出。如果你卸载这两个包，只重新安装@mui/material，它会再次抱怨缺少情感依赖。

npm un @mui/material @mui/lab @mui/icons-material @hookform/devtools
npm i @mui/material @mui/lab @mui/icons-material

【讨论】：

嗨！谢谢您的答复。我正在使用 MUI 组件，例如： import { Box } from '@mui/material';从'@mui/material'导入{按钮，网格}；（仅使用 sx 属性进行样式设置。）我再次删除了 node_modules 和 npm install ，但一切运行良好，没有错误，所以很奇怪我不需要安装这两个包。
@elam 对你有用吗？
对不起，我更新了我的答案。我正在使用按钮、网格等 MUI 组件，仅使用 sx 属性进行样式设置，一切都按预期运行，我只是想知道为什么我不需要安装这两个包。如果我安装它们，一切正常。我什至尝试过删除节点模块并再次重新安装软件包，一切都很好。这很奇怪。
@elam 无关，但您可以在 v5 中使用 LoadingButton
@elam 发现了问题，请参阅我的更新答案：D