带有 Next.js 的 Material-UI 并明确给出警告：道具 `className` 与服务器和客户端不匹配答案

【问题标题】：Material-UI with Next.js & express giving Warning: Prop `className` did not match for server & client带有 Next.js 的 Material-UI 并明确给出警告：道具 `className` 与服务器和客户端不匹配
【发布时间】：2018-04-28 03:08:11
【问题描述】：

当我直接重新加载 /login 和 /account 页面时会发生这种情况。这两个页面都有 Material-UI 组件。

这也是我的快递服务器的样子。 Server.js

【问题讨论】：

MUI 动态生成类名，（它在末尾添加数字）。无论出于何种原因，您都在做 2 倍。您可能正在渲染 2 倍的东西，这很难分辨。
我也在考虑，但不知道在哪里。也许，你能检查我的 server.js 吗？我添加了上面的链接。
我认为我的 /login 路由器也转到了我的 /:id 路由器。有什么建议可以预防吗？
嗯，好主意，尝试快速切断这条路线吗？我个人从来没有用 express 做到这一点 -> 用参数开始一条路线
这只是一个警告，我知道它很烦人，希望它不会引起任何问题，如果有的话，它可能是风格......所以继续工作，这是次要的（我会花几个小时自己想办法）

标签： reactjs express material-ui next.js

【解决方案1】：

好的，这就是我临时解决此问题的方法。我只在触发 componentDidMount 生命周期方法后显示了 Material-UI 组件。我为此使用组件状态。以下是它的工作原理：

class AccountNav extends Component {
    constructor(props){
        super(props);
        this.state = {
            load: false
        }
    }

    componentDidMount(){
        this.setState({ load: true });
    }

    render(){
        const { activeItem } = this.props;
        const { load } = this.state;
        if(!load) return <div></div>;
        else{
            return(
                <List style={{width: 250}}>
                    <ListItem button divider="true" style={activeItem == 'profile' ? styles.listHoverStyle : {}}>
                        <Link prefetch as="/account/profile" href="/account?page_slug=profile">
                            <ListItemText primary='Your Profile' />
                        </Link>
                    </ListItem>
                    <ListItem button style={activeItem == 'edit' ? styles.listHoverStyle : {}}>
                        <Link prefetch as="/account/edit" href="/account?page_slug=edit">
                            <ListItemText primary="Edit Profile" />
                        </Link>
                    </ListItem>
                </List>
            );
        }
    }
}

【讨论】：

从另一个页面导航时，您的解决方案出现错误。错误说Warning: Can only update a mounted or mounting component. This usually means you called setState, replaceState, or forceUpdate on an unmounted component. This is a no-op. Please check the code for the DynamicComponent for SectionAccount component.
您的解决方案不会完全破坏服务器端渲染吗？如果您使用的是 Next.js，您可能需要 SSR。如果您使用不执行 JavaScript 的蜘蛛加载页面，整个页面将保持未呈现，不是吗？
这个解决方案对我有用，谢谢 :) 我还检查了服务器端渲染的源页面，但我看不到任何问题

【解决方案2】：

// 1 . Warning: prop classname did not match. Material ui   with   React  Next.js

// 2 . Use your customization  css here
const useStyles = makeStyles((theme) => ({

    root: {
        flexGrow: 1,
    },

    title: {
        flexGrow: 1,
    },
    my_examle_classssss: {
        with: "100%"
    }

}));

// 3 . Here my Component    
const My_Example_Function = () => {

    const classes = useStyles();

    return (
        <div className={classes.root}>
            <Container>
                <Examle_Component>    {/*  !!! Examle_Component  -->  MuiExamle_Component*/}

                </Examle_Component>
            </Container>
        </div>
    );
}
export default My_Example_Function

// 4. Add  name parameter to the makeStyles function   

const useStyles = makeStyles((theme) => ({

    root: {
        flexGrow: 1,
    },

    title: {
        flexGrow: 1,
    },
    my_examle_classssss: {
        with: "100%"
    },
}), { name: "MuiExamle_ComponentiAppBar" });  

{/* this is the parameter you need to add     { name: "MuiExamle_ComponentiAppBar" } 

The problem will probably be resolved     
if the name parameter matches the first className in the Warning:  you recive..    

EXAMPLE :
    Warning: Prop `className` did not match. 
    Server: "MuiSvgIcon-root makeStyles-root-98" 
    Client: "MuiSvgIcon-root makeStyles-root-1"
The name parameter will be like this   { name: "MuiSvgIcon" }

*/  }

【讨论】：