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

Posted 2023-03-07

【中文标题】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",

【问题讨论】：

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

【参考方案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