Material-ui: Getting Warning: Prop className did not match In Material UI 3.9.6 with NextJS Ask

[ankitpatelinitio]

I used the below code to use AppBar, Toolbar, IconButton, Typography and some other elements of material UI and I applied classes to that element from props but classes not applied. e.g. root, menuButton, grow classes not applied. Also, I get some error in console.

Warning: Prop className did not match. Server: "MuiButtonBase-root-51 MuiIconButton-root-45 MuiIconButton-colorInherit-46 ButtonAppBar-menuButton-127" Client: "MuiButtonBase-root-51 MuiIconButton-root-45 MuiIconButton-colorInherit-46 ButtonAppBar-menuButton-3".

import React from "react";
import PropTypes from "prop-types";
import { withStyles } from "@material-ui/core/styles";
import AppBar from "@material-ui/core/AppBar";
import Toolbar from "@material-ui/core/Toolbar";
import Typography from "@material-ui/core/Typography";
import Button from "@material-ui/core/Button";
import IconButton from "@material-ui/core/IconButton";
import MenuIcon from "@material-ui/icons/Menu";

const styles = {
  root: {
    flexGrow: 1
  },
  grow: {
    flexGrow: 1
  },
  menuButton: {
    marginLeft: -12,
    marginRight: 20
  },
  appbackground: {
    backgroundColor: "#EC5D5D"
  }
};

function ButtonAppBar(props) {
  const { classes } = props;
  return (
    <div className={classes.root}>
      <AppBar position="static">
        <Toolbar>
          <IconButton
            className={classes.menuButton}
            color="inherit"
            aria-label="Menu"
          >
            <MenuIcon />
          </IconButton>
          <Typography variant="h6" color="inherit" className={classes.grow}>
            News
          </Typography>
          <Button href="#text-buttons" color="inherit">
            Login
          </Button>
        </Toolbar>
      </AppBar>
    </div>
  );
} 

 ButtonAppBar.propTypes = {
  classes: PropTypes.object.isRequired
};

export default withStyles(styles)(ButtonAppBar);

Anyone, please suggest/help to fix this issue.

[tkvw]

Please take a look at https://github.com/mui-org/material-ui/tree/next/examples/nextjs-next and follow this example to make styles work.

[oliviertassinari]

Yes, for v4, or https://github.com/mui-org/material-ui/tree/v3.x/examples/nextjs for v3.

---

We are well aware of the problem. We have recently introduced a SSR API, it creates more constraints, it's easier to use, it should reduce the probability of such issues. While you have to configure _document.js and _app.js in v3, configuring _document.js is enough with v4.

[greygatch]

The examples were removed?

[oliviertassinari]

Nothing was removed. It's in the git repository.

[zhaoyao91]

Nothing was removed. It's in the git repository.

it may be a typo, try https://github.com/mui-org/material-ui/tree/master/examples/nextjs