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

我知道关于堆栈溢出的这个问题已经有过时的版本了，比如

然而，当我尝试谷歌和研究人们的解决方案时，却没有明确的答案。我能找到的任何答案都与我的答案不匹配

我的堆栈：

• 节点JS
• 下一个JS
• 材料界面

从我对这些问题的回答中可以看出，当涉及到下一个JS和材质UI时，存在一些不兼容的度量

代码方面，这是我的Appbar组件。起初，我并没有导出我的

useStyles

对象，但我最终还是可怜地尝试着跟着导出。必须有一个修复，不涉及改变像我所有的文件

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',
    },
    inputInput: {
        padding: theme.spacing(1, 1, 1, 7),
        transition: theme.transitions.create('width'),
        width: '100%',
        [theme.breakpoints.up('sm')]: {
            width: 300,
            '&:focus': {
                width: 400,
            },
        },
    }
}));

function SearchBox({currentRefinement, refine}){
    const classes = useStyles();
    return(
        <InputBase
            type="search"
            value={currentRefinement}
            onChange={event => refine(event.currentTarget.value)}
            placeholder="Search by state, park name, keywords..."
            classes = {{
                root: classes.inputRoot,
                input: classes.inputInput,
            }}
        />
    )
}

const CustomSearchBox = connectSearchBox(SearchBox);

function SearchAppBar() {
    const classes = useStyles();
    return (
        <div className={classes.root}>
            <AppBar position="static" color="primary">
                <Toolbar>
                    <IconButton
                        edge="start"
                        className={classes.menuButton}
                        color="inherit"
                        aria-label="Open drawer"
                    >
                        <MenuIcon />
                    </IconButton>
                    <Typography className={classes.title} variant="h6" noWrap>
                        Title
                    </Typography>
                    <div className={classes.search}>
                        <div className={classes.searchIcon}>
                            <SearchIcon />
                        </div>
                        <CustomSearchBox/>
                    </div>
                </Toolbar>
            </AppBar>
        </div>
    );
}

export {SearchAppBar, useStyles};

从“React”导入React；
从“@material ui/core/AppBar”导入AppBar；
从“@material ui/core/Toolbar”导入工具栏；
从“@material ui/core/IconButton”导入IconButton；
从“@material ui/core/Typography”导入排版；
从“@material ui/core/InputBase”导入InputBase；
从“@material ui/core/styles/colormipulator”导入{fade}；
从'@material ui/core/styles'导入{makeStyles}；
从“@material ui/icons/Menu”导入菜单图标；
从“@material ui/icons/Search”导入SearchIcon；
从“react instantsearch dom”导入{connectSearchBox}；
const useStyles=makeStyles（主题=>({
根目录：{
flexGrow:1，
},
菜单按钮：{
边缘光：主题。间距（2），
},
标题：{
flexGrow:1，
显示：“无”，
[theme.breakpoints.up（'sm'）：{
显示：“块”，
},
},
搜索：{
位置：'相对'，
borderRadius:theme.shape.borderRadius，
背景色：淡入淡出（theme.palette.common.white，0.15），
“&：悬停”：{
背景色：淡入淡出（theme.palette.common.white，0.25），
},
marginLeft:0，
宽度：“100%”，
[theme.breakpoints.up（'sm'）：{
边缘左侧：主题。间距（1），
宽度：“自动”，
},
},
搜索图标：{
宽度：主题。间距（7），
高度：“100%”，
位置：'绝对'，
pointerEvents:'无'，
显示：“flex”，
对齐项目：“居中”，
为内容辩护：“中心”，
},
输入根：{
颜色：“继承”，
},
输入输出：{
填充：主题。间距（1,1,1,7），
transition:theme.transitions.create（'width'），
宽度：“100%”，
[theme.breakpoints.up（'sm'）：{
宽度：300，
“&：焦点”：{
宽度：400，
},
},
}
}));
函数搜索框（{currentRefinetion，refine}）{
const classes=useStyles（）；
返回(
优化（event.currentTarget.value）}
占位符=“按州、公园名称、关键字搜索…”
类别={{
根：classes.inputRoot，
输入：classes.inputInput，
}}
/>
)
}
const CustomSearchBox=connectSearchBox（SearchBox）；
函数SearchAppBar（）{
const classes=useStyles（）；
返回(
标题
);
}
导出{SearchAppBar，useStyles}；

我只是在互联网的随机部分寻找这个错误的答案，意外地

npm安装

'ed

样式化组件

，作为Github问题的一部分（因为它们在Material UI中有一个非常类似的对象，称为

服务器样式表

（相对于MaterialUI的

服务器样式表
），显然这不起作用

但是……我最终只是使用了
ServerStyleSheet
修复程序，试图使其与Material UI的
ServerStyleSheets
对象一致，并最终得到了这个新的
\u document.js

我仍然目瞪口呆，我能够重构一个完全不同的修复程序来实现这一点，但我测试了它，它完全修复了问题，现在重新加载就可以了

import Document, { Html, Head, Main, NextScript } from 'next/document';
import {ServerStyleSheets} from "@material-ui/styles";

class MyDocument extends Document {
    static async getInitialProps(ctx) {
        const sheet = new ServerStyleSheets();
        const originalRenderPage = ctx.renderPage;

        try{
            ctx.renderPage = () => originalRenderPage({
                enhanceApp: App => props => sheet.collect(<App {...props}/>)
            });

            const initialProps = await Document.getInitialProps(ctx);
            return { ...initialProps,
                styles: (
                    <>
                        {initialProps.styles}
                        {sheet.getStyleElement()}
                    </>
                )
            }
        } finally {
            ctx.renderPage(sheet)
        }

    }
    render() {
        return (
            <Html>
                <Head>
                    <link rel="shortcut icon" type="image/png" href="../static/favicon.ico"/>
                    <style>{`body { margin: 0 } /* custom! */`}</style>
                    <meta name="viewport"content="width=device-width, initial-scale=1.0" />
                </Head>
                <body className="custom_class">
                    <Main />
                    <NextScript />
                </body>
            </Html>
    )}
}

export default MyDocument;

我希望这有助于解决Material UI+Next.js的混乱问题。这一个在Material UI上对我有效。但它只在开发环境下有效。当我使用生产构建运行它时，我得到了以下错误，类型错误：无法读取开发生产构建上未定义工作的属性“映射”-通过生产运行-失败此答案绝对是Wed my butt.太棒了！万分感谢！我在Next.js中也遇到了同样的问题。在我的例子中，问题的根源是我在服务器和客户端上的状态不同。如果您正在检查窗口对象或本地存储，并有条件地向状态添加一些内容，可能就是这样。
import Document from 'next/document'
import { ServerStyleSheet } from 'styled-components'

export default class MyDocument extends Document {
    static async getInitialProps (ctx) {
        const sheet = new ServerStyleSheet()
        const originalRenderPage = ctx.renderPage

        try {
            ctx.renderPage = () =>
                originalRenderPage({
                    enhanceApp: App => props => sheet.collectStyles(<App {...props} />)
                })

            const initialProps = await Document.getInitialProps(ctx)
            return {
                ...initialProps,
                styles: (
                    <>
                        {initialProps.styles}
                        {sheet.getStyleElement()}
                    </>
                )
            }
        } finally {
            sheet.seal()
        }
    }
}