如何解決反應材料 ui 錯誤

Question

import { AppBar, Toolbar, Typography } from '@material-ui/core'
import React from 'react'
import { makeStyles } from '@material-ui/styles';

const drawerWidth = 240;
const useStyles = makeStyles((theme) => {
    return {
        appBar: {
            width: `calc(100% - ${drawerWidth}px)`,
        },
}});



function Dashboard() {
    const classes = useStyles();
    return (
        <div>
            <AppBar >
                <Toolbar>
                    <Typography>Dashboard 1</Typography>
                </Toolbar>
            </AppBar>
        </div>
    )
}

export default Dashboard

錯誤 - 未捕獲的錯誤：無效的掛鈎調用。 鈎子只能在 function 組件的主體內部調用。 這可能由於以下原因之一而發生：

1. 你可能有不匹配的 React 版本和渲染器（例如 React DOM）
2. 您可能違反了 Hooks 規則
3. 你可能在同一個應用程序中擁有多個 React 副本

任何人都可以幫助解決這個問題

Answer 1

也許你對使用 Material-UI 4 和 5 之間的版本感到困惑。

但是您使用的是版本4 。

您應該從@material-ui/core或@material-ui/core/styles導入makeStyles而不是從@material-ui/styles 。

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

參考這個。 https://v4.mui.com/styles/api/#makestyles-styles-options-hook

Answer 2

嘗試更改您的導入並添加createStyles調用：

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

const drawerWidth = 240;
const useStyles = makeStyles((theme) => {
  createStyles({
    appBar: {
      width: `calc(100% - ${drawerWidth}px)`,
    },
  });
});