Material-UI v5 不能使用样式组件和打字稿？答案

【问题标题】：Material-UI v5 not working styled-components and typescript?Material-UI v5 不能使用样式组件和打字稿？
【发布时间】：2021-09-17 12:12:12
【问题描述】：

我正在尝试将 mui-v5 与样式组件和打字稿一起使用。但是，即使在我将该行添加到我的 tsconfig 之后：

"paths": {
  "@mui/styled-engine": [ "./node_modules/@mui/styled-engine-sc" ]
}

我收到一个错误：

找不到依赖项：'@emotion/styled' 相对于 '/node_modules/@mui/styled-engine/index.js'

做的时候：import { ThemeProvider } from "@mui/material/styles";

我创建了一个Code Sandbox 来展示我的设置。

有谁知道我做错了什么？

【问题讨论】：

您介意显示您的 package.json 的内容吗？我的部门中有"@mui/styled-engine-sc，一切正常。

标签： reactjs typescript material-ui

【解决方案1】：

您需要将@emotion/styled 和@emotion/react 添加到依赖项中

【讨论】：

但我认为使用 styled-components 的全部意义在于我不需要情感
是的，我检查了这个mui.com/guides/styled-engine，它说@emotion/react、@emotion/styled 和styled-components 是@mui/material 的可选对等依赖项，因此您需要自己安装它们。
那些说明真的很混乱。如果它是可选的，那是否意味着您不需要它们？
检查这个codeandbox是否是你要找的codesandbox.io/s/styled-components-forked-4f88k?file=/src/…
终于。我读过没有解决它的多段解决方案。这样做了，谢谢

【解决方案2】：

您无需添加@emotion/styled。 mui installation 说你可以使用情感或样式组件

我知道说明有点混乱，但我只是将 package.json 部分复制/粘贴到 mui.com/guides/styled-engine/ 中，它对我有用

package.json:

{
  "dependencies": {
    "@mui/material": "^5.0.0",
    "styled-components": "^5.3.1",
  },
  "devDependencies": {
    "@mui/styled-engine": "npm:@mui/styled-engine-sc@latest",
    "@types/styled-components": "^5.1.14",
  },
  "resolutions": {
    "@mui/styled-engine": "npm:@mui/styled-engine-sc@latest"
  }
}

【讨论】：

问题是这只适用于yarn，因为“分辨率”是一个毛线
啊哈！谢谢，它确实拯救了我的夜晚。