警告：道具 `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',

    },