react-dom.development.js?61bb:530 Warning: Prop className did not match

Question

react-dom.development.js?61bb:530 Warning: Prop className did not match.

Server: "MuiTypography-root makeStyles-root-32 makeStyles-root-47 makeStyles-darkest-27 makeStyles-bodySmall-43 makeStyles-noTextTransform-41 MuiTypography-body1" Client: "MuiTypography-root makeStyles-root-32 makeStyles-root-48 makeStyles-darkest-27 makeStyles-bodySmall-43 makeStyles-noTextTransform-41 MuiTypography-body1"

I have tried the following so far to no avail:

• configured runtime chunk in webpack, as we are code splitting at the route level,

optimization: {
    runtimeChunk: {
      name: 'app',
    },
  },

• verified there is only one version of material-ui, the latest, 4.9.3

• node environment is the same for both client and server

• tried wrapping both the client and app in stylesprovider with a fresh createGenerateClassName:

server:

const sheets = new ServerStyleSheets();

      const generateClassName = createGenerateClassName({
        productionPrefix: 'tock',
      });

      const html = ReactDomServer.renderToString(
        sheets.collect(
          <Provider store={store}>
            <StaticRouter location={req.url} context={routerContext}>
              <StylesProvider generateClassName={generateClassName}>
                <Application />
              </StylesProvider>
            </StaticRouter>
          </Provider>
        )
      );

as well as ensuring that new ServerStyleSheets is created on every requuest.

client:

const generateClassName = createGenerateClassName({
    productionPrefix: 'tock',
  });
  try {
    (fullRender ? ReactDOM.render : ReactDOM.hydrate)(
      <StrictMode>
        <Provider store={store}>
          <Router history={tockHistory}>
            <StylesProvider generateClassName={generateClassName}>
              <Routes />
            </StylesProvider>
          </Router>
        </Provider>
      </StrictMode>,
      document.querySelector('#Root')
    );
  } catch (e) {
    // eslint-disable-next-line no-console
    console.error(e);
    throw e;
  }

followed the reference implementation: https://material-ui.com/guides/server-rendering/

this seems to only be happening in development mode. If I bundle for production and run the app, it's working.

worked through: https://material-ui.com/getting-started/faq/#my-app-doesnt-render-correctly-on-the-server

specifically, I was interested in this: https://material-ui.com/getting-started/faq/#react-class-name-hydration-mismatch

Node: v13.8.0 Webpack: 4.41.6 Material-ui: 4.9.3

the component where we started seeing this issue, interestingly, uses some prop based styles:

export const useTypographyStyles = makeStyles((theme) => ({
  root: {
    marginBottom: ({ mb, paragraph }: TypographyProps) =>
      paragraph ? theme.spacing(2) : theme.spacing(mb ?? 0),
  },

which I notice generates 2 strings for the classes in the hook.

root: "makeStyles-root-32 makeStyles-root-232"

is what I get when I log the result of:

const classes = useTypographyStyles({ mb, paragraph });

but if I do a regular style there with just a value, I do not get the issue.

Answer 1

I know this isn't much help but changing the specific error triggering className worked for me. I had a class called EmojiWrapper and it was giving the error of client/server difference. So I renamed it and the problem went away. I think it has something to do with caching.