@material-ui/core/styles 的问题：不包含名为“makeStyles”的导出

Question

首先，我不得不说我有这个问题超过 2 天了，我真的不知道该怎么做，我搜索了整个堆栈溢出，那里有一些问题完全退出了我的问题，我试过了他们，但他们都没有工作，我搜索了文档并跟随，但我不知道我是否做得对。

不得不说，我刚开始学习 React。

好的，所以当我使用npm start时出现错误，在终端中，我得到一个Failed to compile ，并且在浏览器中显示一个错误：

4:16-26“@material-ui/core/styles”不包含名为“makeStyles”的导出

不得不提一下，我将我的 js 文件命名为 styles.js，后来我将其重命名为 Component.styles.js，因为这样 react 会知道它是一个样式文件，我真的不知道它是否有效，但是我如果您想检查它，将让我找到它的来源： https ://towardsdev.com/use-your-makestyles-7d347f9a3e96

然后我有一个 App.js，我在其中导入 js 样式，如下所示：

 import useStyles from './yourComponent.styles.js';

这是我的：

yourComponent.styles.js：

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

const useStyles = makeStyles({
  BarStylee: {
    background: 'linear-gradient(45deg, #FE6B8B 30%, #FF8E53 90%)',
    border: 0,
    borderRadius: 3,
    boxShadow: '0 3px 5px 2px rgba(255, 105, 135, .3)',
    color: 'white',
    height: 48,
    padding: '0 30px',
  },
});

export default useStyles;

这是我的：

应用程序.js：

import React from 'react';
import {Container,AppBar,Typography,Grow,Grid} from '@material-ui/core';
import pens from'./images/pencils.jpg';
import Posts from '../src/components/Posts/Posts.js';
import Form from '../src/components/Form/Form.js';
import useStyles from './yourComponent.styles.js';
const App = () => {
    const classes = useStyles();
    return (
        <Container maxidth="lg">
            <AppBar className={classes.BarStyle} position="static" color="inherit">
                <Typography variant="h2" align="center">School</Typography>
                <img  src={pens} alt="pencils" height="150"/>
            </AppBar>
            <Grow in>
                <Container>
                    <Grid container justify="space-between" alignItems="stretch" spacing={3}>
                        <Grid item xs={12} sm={7}>
                            <Posts />
                        </Grid>
                        <Grid item xs={12} sm={4}>
                            <Form />
                        </Grid>
                    </Grid>
                </Container>
            </Grow>
        </Container>
    );
}
export default App;

谢谢！！

Answer 1

从mui@5.x makeStyles已移入@material-ui/styles包中。 您应该安装@material-ui/styles@5并将您的代码重写为：

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

const useStyles = makeStyles({...})

Answer 2

也可以如下使用

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

const useStyles = makeStyles({...})