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

1
votes

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

enter image description here

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

2
reactjsexpressmaterial-uinext.js
MUI dynamically generates classNames, (it adds the number at the end). for whatever reason, you are doing that 2x. you might be rendering something 2x, hard to tell from just this. – omarjmh
I'm also thinking about it but couldn't figure out where. Perhaps, could you check my server.js? I added the link above. – loQ
I think my /login router also goes to my /:id router. Any advise on how to prevent it? – loQ
hmmm, good thought, try cutting that route real quick? I've personally never done that with express -> starting a route with a param – omarjmh
also this is just a warning, I know its annoying, hopefully its not causing any issues, if any it would prob be style...sooo just keep working, this is minor (I would spend hours figuring it out myself) – omarjmh

2 Answers

4
votes

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

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

*/  }