【问题标题】：Why Material-UI is not recognizing the theme.spacing function?为什么 Material-UI 无法识别 theme.spacing 功能？
【发布时间】：2019-02-09 18:30:09
【问题描述】：

说明

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

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

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

上下文

the Github issue 用于解决此问题。
这里是the repo，带有违规代码。错误出现在src\pages\index.js 文件的第 16 行： paddingTop: theme.spacing(20)
这里是the sandboxed repo running，您可以在其中实际看到错误消息。

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

材料-UI：v3.9.2
反应：v16.8.1
铬：v72.0.3626.96
TypeScript：无
create-react-app: v3.2.2

【问题讨论】：

这也可能是 Material UI 从 v.4 迁移到 v5 造成的，并且可以通过不同的方式解决，具体取决于调用默认主题的位置stackoverflow.com/questions/67434882/…
还要注意与事物主题交互的情感库。

标签： javascript reactjs material-ui

【解决方案1】：

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

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

【讨论】：

我在使用 MUI5 仍然遇到这个问题
@theMyth，我也一样，使用 webpack

【解决方案2】：

试试这个。

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

【讨论】：

【解决方案3】：

之前：import { makeStyles } from '@material-ui/core'; 可以工作。

但现在在最新的材质 UI 版本中，我们需要添加以下导入：

import { makeStyles } from '@material-ui/styles';

【讨论】：

【解决方案4】：

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

像这样导入 makestyles

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

【讨论】：

【解决方案5】：

尝试将@material-ui/core 包升级到最低版本 4.0.0。
运行 npm i @material-ui/core@4.0.0
它解决了我的问题。

【讨论】：

【解决方案6】：

接下来就做吧：

const theme = createMuiTheme({
  status: {
    danger: orange[500],
  },
});

export default function CustomStyles() {
  return (
    <ThemeProvider theme={theme}>
      <CustomCheckbox />
    </ThemeProvider>
  );
}

【讨论】：

【解决方案7】：

添加导入使错误消失：

import {makeStyles} from "@material-ui/**core**/styles";

【讨论】：

【解决方案8】：

使用 MUI 版本 5 (V5.0.3)，我收到此错误，因为 makeStyles 的导入必须是

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

有关文档，请参见此处：https://mui.com/styles/api/#heading-makestyles-styles-options-hook

【讨论】：

【解决方案9】：

在 MUI V5 中使用 npm install tss-react。 https://mui.com/guides/migration-v4/#migrate-from-jss

【讨论】：