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

【问题标题】：MUI - makeStyles - Cannot read properties of undefinedMUI - makeStyles - 无法读取未定义的属性
【发布时间】：2021-12-01 11:26:03
【问题描述】：

我正在学习 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自己吗？

标签： javascript reactjs material-ui jss

【解决方案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 as recommended 由 MUI 团队.

相关答案