为什么Material-UI无法识别theme.spacing功能？

Question

说明

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

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

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

---

上下文

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

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

• 材料界面：v3.9.2
• 反应：v16.8.1
• Chrome浏览器：v72.0.3626.96
• TypeScript：无
• create-react-app：v3.2.2

Answer 1

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

现在正在解决问题，所以我要解决这个问题。

Answer 2

尝试一下。

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

Answer 3

只需做另一种方式：

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

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

Answer 4

之前：import { makeStyles } from '@material-ui/core'; 会起作用。

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

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

Answer 5

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

Answer 6

添加导入使错误消失：

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