警告：道具 `className` 不匹配 ~ Material UI css 在重新加载时任意中断

Question

我知道关于堆栈溢出的这个问题已经有过时的版本，比如React + Material-UI - Warning: Prop className did not match。但是，当我尝试 google 并研究人们的解决方案时，没有明确的答案。我能找到的任何答案都与我的堆栈不匹配。我的堆栈：节点JS下一个 JS材质界面从我可以从next.js 和 material-ui等问题的答案中收集到的信息- 让它们工作是在 Next JS 和 Material UI 方面存在某种程度的不兼容。代码方面，这是我的 Appbar 组件。最初我没有导出我的useStyles对象，但我最终做了一个可怜的尝试，遵循Material UI 的“服务器渲染”明确指南。必须有一个不涉及更改的修复程序，就像我拥有的每个文件一样。import React from 'react';import AppBar from '@material-ui/core/AppBar';import Toolbar from '@material-ui/core/Toolbar';import IconButton from '@material-ui/core/IconButton';import Typography from '@material-ui/core/Typography';import InputBase from '@material-ui/core/InputBase';import { fade } from '@material-ui/core/styles/colorManipulator';import { makeStyles } from '@material-ui/core/styles';import MenuIcon from '@material-ui/icons/Menu';import SearchIcon from '@material-ui/icons/Search';import {connectSearchBox} from 'react-instantsearch-dom';const useStyles = makeStyles(theme => ({    root: {        flexGrow: 1,    },    menuButton: {        marginRight: theme.spacing(2),    },    title: {        flexGrow: 1,        display: 'none',        [theme.breakpoints.up('sm')]: {            display: 'block',        },    },    search: {        position: 'relative',        borderRadius: theme.shape.borderRadius,        backgroundColor: fade(theme.palette.common.white, 0.15),        '&:hover': {            backgroundColor: fade(theme.palette.common.white, 0.25),        },        marginLeft: 0,        width: '100%',        [theme.breakpoints.up('sm')]: {            marginLeft: theme.spacing(1),            width: 'auto',        },    },    searchIcon: {        width: theme.spacing(7),        height: '100%',        position: 'absolute',        pointerEvents: 'none',        display: 'flex',        alignItems: 'center',        justifyContent: 'center',    },    inputRoot: {        color: 'inherit',    },