Material-UI with Next.js & express giving Warning: Prop `className` did not match for server & client

Question

This happens when I reload directly the /login and /account page. Those two pages has Material-UI components.

Also here's how my express server looks like. Server.js

Answer 1

// 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" }

*/  }

Answer 2

Ok so here's what I did to temporarily fix this problem. I only showed the Material-UI component after firing the componentDidMount lifecycle method. I'm using component state for this. Here's how it works:

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>
            );
        }
    }
}