reactjs - TypeError : theme. 间距不是函数

Question

我正在研究 React 应用程序并使用 material-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 即“padding: theme.spacing(3)” 它在我的浏览器上显示错误

TypeError: theme.spacing is not a function

Answer 1

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

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

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

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