2

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

loQ
  • 2,147
  • 18
  • 21
  • 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 Nov 15 '17 at 02:10
  • 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 Nov 15 '17 at 02:33
  • I think my /login router also goes to my /:id router. Any advise on how to prevent it? – loQ Nov 15 '17 at 02:35
  • hmmm, good thought, try cutting that route real quick? I've personally never done that with express -> starting a route with a param – omarjmh Nov 15 '17 at 03:06
  • 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 Nov 15 '17 at 03:07
  • I tried to remove the /:id route but the problem is still there. I know it's just a warning but it would make the material-ui components unstyled when the warning appear. – loQ Nov 15 '17 at 06:52
  • Any solutions so far? I'm stuck with this issue too! The problem with my app is that I have to manually mount the components after SSR. The material-ui components don't show up properly if I don't call ReactRailsUJS.mountComponents(".my-class"); explicitly. I have multiple components on one page and any component rendered for the first time shows fine whereas others break. – VPaul May 20 '18 at 13:03
  • I had the same problem in Next.js. See https://stackoverflow.com/a/58626730/2728710 – pom421 Oct 30 '19 at 13:45

2 Answers2

4

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>
            );
        }
    }
}
loQ
  • 2,147
  • 18
  • 21
  • I got an error with your solution when navigating from another page. The error says `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.` – Rohman HM Jan 26 '18 at 03:52
  • Doesn't your solution completely destroy server-side rendering though? If you are using Next.js you probably want SSR. If you load your page with a spider that doesn't execute JavaScript the whole page will remain un-rendered won't it? – Rob Evans May 23 '18 at 20:55
  • this solution worked for me thank you :) I also checked the source page for server side rendering but i couldn't see any problem – Akif Kara Aug 27 '21 at 12:21
0

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

*/  }
Halil Taylan Engin
  • 87
  • 1
  • 4