ReactJS: TypeError: theme.spacing不是一个函数

Question

我正在构建一个'ReactJS‘应用程序，并遇到了以下错误：

E:/Projects/PortfolioSite/React-Portfolio-Website/react-portfolio-website/src/components/Navbar.js:39 36，theme.spacing不是一个函数(匿名函数)：{ 37维显示：“块”，38维边距："0.5rem auto"，> 39欧元宽: theme.spacing(13)，40连平: theme.spacing(13) 41 \x} 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不承认theme.spacing函数？

& GitHub会话：[网格]使用无单位间距API #14099

但却找不到一个有用的答案。

Answer 1

之所以会发生这种情况，是因为您没有在应用程序上定义一个实质性的ui主题。然后应用默认的资料ui主题，或您自己的主题。它可以通过两种方式实现：

1. 用ThemeProvider组件包装应用程序
2. 从makeStyles导出@material-ui/styles钩子，以获得默认主题。

Answer 2

我想在前面的回答中补充指出，造成此错误的另一个原因是，一旦从Material 4.xtoMaterial5.x迁移到来自@mui/ style的导入，假设您已经创建了一个样式对象，那么实际上，正如在您的代码中所指的主题对象一样，这个主题对象不再以默认形式出现：

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),
  },
},

Answer 3

根据MUI的最新版本，您应该从makeStyles中导入@梅/风格。

1. 在应用程序的根部添加一个ThemeProvider，因为defaultTheme不再可用。
2. 如果将此实用程序与@mui/material一起使用，建议您使用@mui/material/styles中的ThemeProvider组件