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

Question

描述

我试图用材料的UI的theme.spacing功能的应用程序做出反应，但间距功能无法识别。

Javascript错误消息是：TypeError：theme.spacing不是函数

我不确定这是否是错误或正在安装的框架版本有问题。

---

语境

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

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

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

Answer 1

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

现在正在修复中，所以我要结束这个问题。

Answer 2

对于material ui version 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：由于信用限制，我无法发表评论，因此作为新答案发布。