MUI - makeStyles - 无法读取未定义的属性

Question

我正在学习 MUI，在课程中，讲师要求我只设计一个组件的样式，而不是整个主题。

为此，它使用 makeStyles 函数并传播 theme.mixins.toolbar。问题是当我这样做时，出现以下错误：

TypeError: Cannot read properties of undefined (reading 'toolbar')

这门课程显然是第 4 版，而我使用的是第 5 版。尽管如此，我的代码似乎遵循了文档要求的更改。那么是什么导致了这个错误？

app.js

import "./App.css";
import Header from "./components/ui/Header";
import { ThemeProvider } from "@material-ui/core/styles";
import theme from "./components/ui/Theme";

function App() {
    return (
        <ThemeProvider theme={theme}>
            <Header />
        </ThemeProvider>
    );
}

export default App;

Theme.js

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

const arcBlue = "#0B72B9";
const arcOrange = "#FFBA60";

export default createTheme({
    typography: {
        h3: {
            fontWeight: 100,
        },
    },
    palette: {
        common: {
            blue: `${arcBlue}`,
            orange: `${arcOrange}`,
        },
        primary: {
            main: `${arcBlue}`,
        },
        secondary: {
            main: `${arcOrange}`,
        },
    },
});

header/index.jsx

import React from "react";
import AppBar from "@mui/material/AppBar";
import Toolbar from "@mui/material/Toolbar";
import useScrollTrigger from "@mui/material/useScrollTrigger";
import Typography from "@mui/material/Typography";
import { makeStyles } from "@material-ui/styles";

function ElevationScroll(props) {
    const { children, window } = props;
    const trigger = useScrollTrigger({
        disableHysteresis: true,
        threshold: 0,
        target: window ? window() : undefined,
    });

    return React.cloneElement(children, {
        elevation: trigger ? 10 : 0,
    });
}

const useStyles = makeStyles((theme) => ({
    toolbarMargin: { ...theme.mixins.toolbar },
}));

function Header() {
    const classes = useStyles();
    return (
        <React.Fragment>
            <ElevationScroll>
                <AppBar color="primary">
                    <Toolbar>
                        <Typography variant="h3" component="h3">
                            Nome de teste
                        </Typography>
                    </Toolbar>
                </AppBar>
            </ElevationScroll>
            <div className={classes.toolBarMargin} />
        </React.Fragment>
    );
}

export default Header;

Answer 1

我在 CodeSandbox 上创建了一个项目，它似乎不是代码中的问题。我猜你需要检查你在 package.json 文件中安装的包的版本。

这是 CodeSandbox 项目的 link，您可以在控制台选项卡上看到 console.log 消息。

https://codesandbox.io/s/check-makestyle-eq67m?file=/src/components/ui/Header/index.js

Answer 2

由于您使用的是 v5，请更改 ThemeProvider、createTheme 和 makeStyles 导入路径自：

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

收件人：

import { ThemeProvider, createTheme } from "@mui/material/styles";
import { makeStyles } from "@mui/styles";

@material-ui/core 是 v4 包，@mui/material 是 v5 等效包。 2 个版本中的 API 不兼容。在 v5 中，makeStyles 也被移动到名为 @mui/styles 的遗留包中，如果您在新项目中使用 MUI v5，则应完全切换到 styled/sx API 由 MUI 团队 recommended。

MUI - makeStyles - 无法读取未定义的属性

MUI - makeStyles - Cannot read properties of undefined

javascript

reactjs

material-ui

jss

相关回答