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

Question

我正在学习 MUI，在类(class)中，讲师要求我只设计一个组件而不是整个主题。
为此，它使用 制作样式 功能和传播theme.mixins.toolbar .问题是当我这样做时，出现以下错误:

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

这门类(class)显然是第 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;

主题.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

由于您使用的是 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 为 recommended由 MUI 团队。
相关答案

Difference between @mui/material/styles and @mui/styles?

Cannot use palette colors from MUI theme

MUI createTheme is not properly passing theme to MUI components