TypeError: theme.spacing不是一个函数

Question

我正在使用react应用程序和使用资料-ui v5，我被困在这个错误上，theme.spacing不起作用。

import { makeStyles } from "@material-ui/styles";
import React from "react";
import Drawer from "@mui/material/Drawer";
import Typography from "@mui/material/Typography";
import List from "@mui/material/List";
import ListItem from "@mui/material/ListItem";
import ListItemIcon from "@mui/material/ListItemIcon";
import ListItemText from "@mui/material/ListItemText";
import { AddCircleOutlineOutlined, SubjectOutlined } from "@mui/icons-material";
import { useHistory, useLocation } from "react-router";

const drawerWidth = 240;

const useStyles = makeStyles((theme) => {
  return {
    page: {
      background: "#f9f9f9",
      width: "100%",
      padding: theme.spacing(3),
    },
    drawer: {
      width: drawerWidth,
    },
    drawerPaper: {
      width: drawerWidth,
    },
    root: {
      display: "flex",
    },
    active: {
      background: "#f4f4f4 !important",
    },
  };
});

const Layout = ({ children }) => {
  const classes = useStyles();
  const history = useHistory();
  const location = useLocation();

  const menuItems = [
    {
      text: "My Notes",
      icon: <SubjectOutlined color="secondary" />,
      path: "/",
    },
    {
      text: "Create Note",
      icon: <AddCircleOutlineOutlined color="secondary" />,
      path: "/create",
    },
  ];

  return (
    <div className={classes.root}>
      
      <div className={classes.page}>{children}</div>
    </div>
  );
};

export default Layout;

在第19号线，即“填充: theme.spacing(3)”，它在我的浏览器上显示错误。

TypeError: theme.spacing不是函数

Answer 1

这是不起作用的，因为你必须键入你的主题

1. 导入主题

从'@mui/material'导入{ Theme }

1. 现在键入它：

UseStyles=makeStyles(主题:主题)=>({ root:{背景：'black'，padding:theme.spacing(3)，})

我正面临着同样的问题，这对我来说很有效。

Answer 2

您是如何创建主题的，是用createTheme制作的吗？您需要在应用程序的根目录中传递提供程序。试着像这样进口。

import { createTheme } from '@mui/material/styles

然后为您的应用程序定义所有的全局样式，然后做出，例如。

import { ThemeProvider } from "@mui/material/styles";
<ThemeProvider theme={yourtheme}><App/></ThemeProvider>

Answer 3

也许你的进口是错的？尝尝这个

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