为什么Material不承认theme.spacing函数？

Question

描述

我试图在一个function应用程序中使用Material的theme.spacing函数，但是间隔函数没有被识别。

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

我不确定这是否是一个bug，或者我安装的框架版本有问题。

上下文

• 这里提出了解决这个问题的吉特布问题。
• 下面是带有违规代码的回购。错误出现在src\pages\index.js文件第16行：paddingTop: theme.spacing(20)中。
• 这里是沙箱爬行，您可以在这里实际看到错误消息。

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

• 材料-用户界面: v3.9.2
• 反应: v16.8.1
• 铬: v72.0.3626.96
• TypeScript:无
• 创建-react app: v3.2.2

Answer 1

事实上，这毕竟是由请求#14099引起的一个bug。

解决方案正在进行中，所以我要结束这个问题。

Answer 2

对于实质性ui版本5.1.0，以下内容对我有效(如@Worm所说)

• 导入像这样的造型

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:张贴作为新的答案，因为我不能评论，因为信贷限额。

Answer 3

尝尝这个。

import { makeStyles } from '@material-ui/core/styles' 
const userStyles = makeStyles (theme => ({
gridAlign : {
    padding: theme.spacing(2),
    textAlign: 'center',
    color: theme.palette.secondary,
  },
})