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

Posted 2023-03-06

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

【英文标题】：Warning: Prop `className` did not match ~ Material UI css arbitrarily breaks on reload

【发布时间】：2019-10-12 12:13:18

【问题描述】：

Video reproducing the error/missing css

我知道这个问题的堆栈溢出问题已经过时了，比如React + Material-UI - Warning: Prop className did not match。

但是，当我尝试用谷歌搜索和研究人们的解决方案时，并没有明确的答案。我能找到的任何答案都与我的堆栈不匹配。

我的堆栈：

节点 JS 下一个JS 材质界面

我从next.js & material-ui - getting them to work 等问题的答案中了解到，在 Next JS 和 Material UI 方面存在一定程度的不兼容。

代码方面，这是我的 Appbar 组件。最初我没有导出我的useStyles 对象，但我最终做了一个可怜的尝试来跟随Material UI's express guide to "server rendering"。必须有一个不涉及更改的修复程序，就像我拥有的​​每个文件一样。

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;

【问题讨论】：

我在 Next.js 中遇到了同样的问题。见***.com/a/58626730/2728710

就我而言，问题的根源在于我在服务器和客户端的状态不同。如果您正在检查 window 对象或 localStorage，并有条件地向状态添加一些内容，那可能就是它。

如果还在挣扎，试试这个：***.com/a/69787927/10146901

【参考方案1】：

我只是在互联网的随机部分中寻找这个错误的答案，不小心 npm install'ed styled-components 在 Github 问题上作为 this answer 的一部分（因为它们与对应的对象有一个非常相似的对象在名为 ServerStyleSheet 的 Material UI 中（与 Material UI 的 ServerStyleSheets 相比），显然这不起作用。

但是.........我最终只是使用了ServerStyleSheet 修复来尝试使其与 Material UI 的ServerStyleSheets 对象一致，并最终得到了这个新的_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;

如果你想看看它有多疯狂，这里是 styled-components 中相同错误的修复：

导出默认的我的文档；

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()
        
    

我希望这有助于解决 Material-UI + Next.js 的混乱情况

【讨论】：

这个在meterial-ui上对我有用。但它只适用于开发环境。当我使用生产构建运行它时，出现以下错误，TypeError: Cannot read property 'map' of undefined Works on dev production build - pass production run - failed

这个答案绝对救了我的命。惊人的！谢谢一百万！

非常感谢！你真的救了我的____：*

【参考方案2】：

就我而言，出于某种原因，在 makeStyle 挂钩中添加 name: "MuiExample_Component" 是可行的。我在互联网上挖掘时找到了这个解决方案。如果有人能告诉我这是否是一个好的解决方案，我将不胜感激，但这里是代码：

const useStyles = makeStyles(
    card: 
        backgroundColor: "#f7f7f7",
        width: "33%",
    ,
    title: 
        color: "#0ab5db",
        fontWeight: "bold",
    ,
    description: 
        fontSize: "1em"
    
,  name: "MuiExample_Component" );

【讨论】：

提供答案意味着您知道它是否有效。否则，只需提供您在 cmets 中获取此代码的链接

我不知道为什么会这样，但确实如此。不过很想得到来源的链接。

之所以有效，是因为您明确设置了 css 类的名称，因此服务器和客户端版本都将使用相同的类名。如果你省略了这个选项，每次 mui 渲染这个组件时都会产生一个随机名称，因此服务器渲染的 className 将与客户端渲染的不同。