ReactJS：类型错误：theme.spacing 不是函数

Question

我正在构建“ReactJS”应用程序并遇到以下错误：

TypeError: theme.spacing is not a function
(anonymous function)
E:/Projects/PortfolioSite/React-Portfolio-Website/react-portfolio-website/src/components/Navbar.js:39
  36 |     avatar:{
  37 |         display: "block",
  38 |         margin: "0.5rem auto",
> 39 |         width: theme.spacing(13),
  40 |         heght: theme.spacing(13)
  41 |     }
  42 | }));

我已经makestyles从导入了"@material-ui/styles"。但它输出上述错误：

为了供您参考，我想添加我使用的完整代码：

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

import {
    AppBar,
    Toolbar,
    ListItem,
    ListItemIcon,
    IconButton,
    ListItemText,
    Avatar,
    Divider,
    List,
    Typography,
    Box
} from "@material-ui/core";

import {
    ArrowBack,
    AssignmentInd,
    Home,
    Apps,
    ContactMail

} from "@material-ui/icons";

import avatar from "../Assets/Images/avatar.png";

//CSS styles
const useStyles = makeStyles( theme =>({
    menuSliderContainer:{
        width: 250,
        background: "#511",
        height: "30rem"
    },
    avatar:{
        display: "block",
        margin: "0.5rem auto",
        width: theme.spacing(13),
        heght: theme.spacing(13)
    }
}));

const menuItems = [
    {
        listIcon: <Home/>,
        listText: "Home"
    },
    {
        listIcon: <AssignmentInd/>,
        listText: "Resume"
    },
    {
        listIcon: <Apps/>,
        listText: "Portfolio"
    },    
    {
        listIcon: <ContactMail/>,
        listText: "Contact"
    },    
    {
        listIcon: <Home/>,
        listText: "Home"
    }
]

const Navbar = () => {
    const classes = useStyles()
    return (
        <>
        <Box component="div" className={classes.menuSliderContainer}>
            <Avatar src={avatar} className={classes.avatar} alt="Pawara Siriwardhane"/>
            <Divider/>
            <List>
                {menuItems.map((lstItem,key)=>(
                    <ListItem button key={key}>
                        <ListItemIcon>
                            {lstItem.listIcon}
                        </ListItemIcon>
                        <ListItemText/>
                    </ListItem>
                ))}
            </List>
        </Box>
        <Box component="nav">
            <AppBar position="static" style={{background:"#222"}}>
                <Toolbar>
                <IconButton>
                    <ArrowBack style={{color: "tomato"}}/>
                </IconButton>
                <Typography variant="h5" style={{color:"tan"}}> Portfolio </Typography>
                </Toolbar>
            </AppBar>
        </Box>
        </>
    )
}

export default Navbar

我已经解决了
已经提出的问题：为什么 Material-UI 无法识别 theme.spacing 函数？
& GitHub 对话：[Grid] 使用无单位间距 API #14099
但找不到有效的答案。

Answer 1

发生这种情况是因为您没有在应用程序上定义material-ui 主题。然后应用默认的 Material ui 主题，或者您自己的主题。可以通过两种方式完成：

1. 使用ThemeProvider组件包装您的应用程序
2. @material-ui/core/styles从而不是@material-ui/styles导出 makeStyles 挂钩，以便拥有默认主题。

Answer 2

我想在之前的答案中添加一点，指出此错误的另一个原因，一旦从 Material UI 4.x 迁移到 Material 5.x，那么分别从 @mui/styles 导入（假设已经创建了一个样式对象）是实际上，就像在您的代码中一样，您指的是默认情况下不再存在的主题对象，例如：

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

export default makeStyles((theme) => ({

  paper: {
    marginTop: theme.spacing(8), // <-- this theme as isn't defined will 
                                 // cause the error
    display: 'flex',
    flexDirection: 'column',
    alignItems: 'center',
    padding: theme.spacing(2),
  },
  root: {
    '& .MuiTextField-root': {
        margin: theme.spacing(1),
  },
}

如果您想使用主题默认属性，则将该样式更改为

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

export default makeStyles(() => ({

  paper: {
    marginTop: useTheme().spacing(8),
    display: 'flex',
    flexDirection: 'column',
    alignItems: 'center',
    padding: useTheme().spacing(2),
  },
  root: {
    '& .MuiTextField-root': {
    margin: useTheme().spacing(1),
  },
},