为什么 Material-UI 无法识别 theme.spacing 函数？

Question

描述

我正在尝试在 React 应用程序中使用 Material-UI 的 theme.spacing 函数，但无法识别 间距 函数。

Javascript 错误消息是： TypeError: theme.spacing is not a function

我不确定这是一个错误还是我安装的框架版本有问题。

---

语境

• 这是为解决此问题而提出的 Github 问题。
• 这是带有违规代码的 回购协议。错误在 src\pages\index.js 文件中被捕获，第 16 行： paddingTop: theme.spacing(20)
• 这是 运行的沙盒存储库，您可以在其中实际看到错误消息。

根据 package-lock.json 文件，这些是正在安装的框架版本：

• 材质-UI：v3.9.2
• 反应：v16.8.1
• 铬：v72.0.3626.96
• 打字稿：无
• 创建反应应用程序：v3.2.2

原文由 Lesair Valmont 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

好吧，事实证明这毕竟是一个错误，由 请求 #14099 引起。

现在正在修复，所以我将关闭这个问题。

原文由 Lesair Valmont 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

对于材料 ui 版本 5.1.0，以下对我有用（如@Worm 所说）

• 像这样导入 makestyle

 import { makeStyles } from '@mui/styles';

记得安装 @mui/styles

如果你收到类似的警告

MUI: The `styles` argument provided is invalid.
You are providing a function without a theme in the context.
One of the parent elements needs to use a ThemeProvider.
MUI: The `styles` argument provided is invalid.
You are providing a function without a theme in the context.
One of the parent elements needs to use a ThemeProvider.

用 ThemeProvider 包装父容器

export default ParentComponentName = (props)=>{
return(
   <ThemeProvider theme={theme}>
      <SomeThemeComponent>
        <SomeComponent />
      </SomeThemeComponent>
    <ThemeProvider>
)
}

参考

https://mui.com/styles/api/#examples-4

PS：由于信用限制，我无法发表评论，因此作为新答案发布。

原文由 Prashanth T P 发布，翻译遵循 CC BY-SA 4.0 许可协议