MUI v5仅使用sx prop是否需要安装@emotion/react和@emotion/styled?
MUI v5是否需要安装@emotion/react和@emotion/styled问题解答
已将项目从MUI v4升级到v5,目前仅使用sx prop,未安装@emotion/react也可正常运行,项目依赖如下:
"@mui/icons-material": "^5.0.1", "@mui/lab": "^5.0.0-alpha.48", "@mui/material": "^5.0.1",请问是否有必要安装@emotion/react和@emotion/styled?
- 首先解释当前未显式安装也能正常运行的原因
@mui/material v5默认将@emotion/react、@emotion/styled列为对等依赖(peer dependency),现在主流的包管理工具(npm 7+、yarn、pnpm开启对等依赖自动安装配置时)会自动帮你安装这两个依赖到项目的node_modules中,所以即使你没有把它们写到自己项目的package.json依赖列表里,项目也能正常调用到相关代码,不会报错。 - 是否需要显式安装可以分两种场景判断:
- 如果你的项目后续只会用到sx prop做样式调整,没有自定义封装styled组件、使用css prop的需求:可以暂时不补充安装,不过更建议把这两个依赖显式写到package.json里,避免后续换包管理工具、升级包版本时出现对等依赖缺失的报错,影响项目稳定性。
- 如果你的项目后续有自定义样式开发需求:比如用
styled()方法封装自定义业务组件、用Emotion的css prop写脱离MUI组件的自定义样式,就必须显式安装这两个依赖,否则用到相关功能时会直接抛出依赖缺失的错误。
- 补充说明:如果你不想用Emotion作为样式引擎,打算切换为styled-components,就不需要安装这两个依赖,不过需要额外安装styled-components包,并且在项目入口处配置对应的样式适配器。
内容的提问来源于stack exchange,提问作者elam
相关产品推荐
相关产品推荐

