MUI - makeStyles - 無法讀取未定義的屬性

Question

我正在學習 MUI，在課程中，講師要求我只設計一個組件而不是整個主題。

為此，它使用makeStyles function 並傳播theme.mixins.toolbar 。 問題是當我這樣做時，出現以下錯誤：

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

這門課程顯然是第 4 版，而我使用的是第 5 版。盡管如此，我的代碼似乎遵循了文檔要求的更改。 那么是什么導致了這個錯誤呢？

應用程序.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}`,
        },
    },
});

標頭/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文件中安裝的package.json的版本。

這是 CodeSandbox 項目的鏈接，您可以在控制台選項卡上看到 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 等價的。 兩個版本的 API 不兼容。 在 v5 中， makeStyles也被移到了一個名為@mui/styles的遺留包，如果你在新項目中使用 MUI v5，你應該按照 MUI 團隊的建議完全切換到styled / sx API。

相關回答

• @mui/material/styles 和@mui/styles 的區別？
• 不能使用 MUI 主題的調色板顏色
• MUI createTheme 沒有正確地將主題傳遞給 MUI 組件

Answer 3

解決方案

安裝@mui/styles

npm install @mui/styles

改變

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

到

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

和

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

到

import { makeStyles } from "@mui/styles";

和

<div className={classes.toolBarMargin} />

到

<div className={classes.toolbarMargin} />

Answer 4

我遇到了類似的問題Can not read properties of undefined, reading refs拋出makeStyles 。 在我的情況下，它是 mui v5，並且問題發生在升級到 React 18 之后。

就我而言，事實證明我有一些遺留makeStyles(()=>createStyles)以某種方式包裝：

const useStyles = (minWidth: number) =>
  makeStyles((theme: Theme) => ...

我不得不將其更改為：

const useStyles =
  makeStyles((theme: Theme) => ...

也許它對面臨這個問題的其他人有用。