Prop className did not match.

[nphmuller]

When migrating a create-react-app project to Next I stumbled upon the following error during hydration. Maybe I'm doing something wrong, but I think it might be a bug in tss-react. After a lot of tinkering I managed to make the following minimal repro. It's a little bit contrived, to make it as small as possible.

You can reproduce it the following way:

git clone https://github.com/nphmuller/tss-react-classmatch-issue.git
cd tss-react-classmatch-issue
npm i
npm run dev

Now when opening the page in the browser the following error gets logged:

Warning: Prop className did not match. Server: "mui-ek3luc-icon mui-1-icon-ref" Client: "mui-ek3luc-icon mui-0-icon-ref"

Some details on how I got the error

• In page.tsx we render the following:

    <>
      <OtherComponentThatCallsMakeStyles />
      <ComponentWithIssue />
    </>

• The 1st component just calls makeStyles() and renders nothing. It doesn't matter what it renders, just that makeStyles() is called before the component with the issue.
• The main issue lies in the 2nd components, which contains the following code:

const useStyles = makeStyles<void, "link" | "icon">()(
  (_theme, _props, classes) => ({
    link: {
      // Removing this fixes the issue
      [`& .${classes.icon}`]: {
        color: "blue",
      },
    },
    icon: {},
  })
);

const ComponentWithIssue = () => {
  const { classes } = useStyles();

  return (
    <a className={classes.link}>
      <span className={classes.icon}>Icon</span>
    </a>
  );
};

The [`& .${classes.icon}`]: clause seems to cause the different classname to be generated server-side vs client-side.

Additional details

> node -v
v20.9.0

    "@emotion/styled": "11.11.5",
    "@mui/material": "5.15.15",
    "@mui/material-nextjs": "5.15.11",
    "next": "14.2.3",
    "react": "^18",
    "react-dom": "^18",
    "tss-react": "4.9.6"

Mui was setup the following way (via layout.tsx):

import { ThemeProvider, createTheme } from "@mui/material/styles";
import { AppRouterCacheProvider } from "@mui/material-nextjs/v14-appRouter";

...

  <AppRouterCacheProvider>
    <ThemeProvider theme={createTheme()}>{children}</ThemeProvider>
  </AppRouterCacheProvider>

[garronej]

Hello @nphmuller,

Thank you for the detailed issue and the reproduction repository. It helped me discover a bug that wasn't directly tied to your issue.

Regarding your specific problem, the documentation was not clear enough about it, but in SSR setups, you must provide a unique ID to your useStyles using nested selectors:

-const useStyles = makeStyles<void, "icon">()(
+const useStyles = makeStyles<void, "icon">({ uniqId: "xDsMbr" })(
  (_theme, _props, classes) => ({
    link: {
      // Removing this fixes the issue
      [`& .${classes.icon}`]: {
        color: "blue",
      },
    },
    icon: {},
  })
);

https://docs.tss-react.dev/nested-selectors#ssr

This solution is quite clunky; I also encourage you to try out the modern API instead of using makeStyles. It's much better in every way.

import { tss } from "tss-react/mui";

const useStyles = tss
  .withName("ComponentWithIssue")
  .withNestedSelectors<"icon">()
  .create(({ theme, classes })=> ({
    link: {
      [`& .${classes.icon}`]: {
        color: "blue",
      },
    },
    icon: {},
  }));

Giving a name is required in SSR setups when you use nested selectors. Anyway, giving a name to the useStyles is good practice since it makes finding the source code of the style from the browser debug tool much easier.

Don't forget to update to the latest version; I published a patch.

Best,

[nphmuller]

Thank you so much for the lightning fast response. I should have suspected it was a usage error. It usually is 😁.

I'll make the necessary changes and I'll close this issue now.

Thanks again!

[garronej]

@nphmuller,

No, no! You did good opening this issue, as I said revisiting the code made me found another bug!
Beside, the documentation about this wasn't clear enough.

[ArtemAstakhov]

Hello, @garronej

I think this issue is still relevant in version 4.9.10. Every time nested selectors are used, both classes (nested selected & the class that uses it) lose their id during hydration.

Here are a couple of code samples that cause the error in NextJs with app directory

export const useStyles = tss
  .withName("Header")
  .withNestedSelectors<"menuItemActive">()
  .create(({ theme, classes }) => ({
    menuItem: {
      height: 41,
      display: "flex",
      alignItems: "center",
      justifyContent: "center",
      borderRadius: 10,
      textDecoration: "none",
      boxSizing: "border-box",
      padding: "0 22px",

      "@media (hover: hover) and (pointer: fine)": {
        [`:hover:not(.${classes.menuItemActive})`]: {
          backgroundColor: theme.colors.basic[300],
        },
      },
    },

    menuItemActive: {
      backgroundColor: theme.colors.secondary[200],
    },
  }));

export const useStyles = tss
  .withName("MultiSelect")
  .withNestedSelectors<"label">()
  .create(({ theme, classes }) => ({
    container: {
      paddingTop: 12,
      paddingBottom: 12,
      display: "flex",
      alignItems: "center",
      columnGap: 6,

      "@media (hover: hover) and (pointer: fine)": {
        cursor: "pointer",

        ":hover": {
          [`.${classes.label}`]: {
            color: theme.colors.basic[600],
          },
        },
      },
    },

    label: {},
  }));

[garronej]

Hello @ArtemAstakhov,

Sorry I can't reproduce.
I created a reproduction repo with your code. No issue

Screen.Recording.2024-05-09.at.02.24.45.mov

Can you please try do fork and modify the repo to make the issue your experiencing appear:

https://github.com/garronej/tss-issue-212

If I can reproduce I will adress it switfly.

[ArtemAstakhov]

@garronej I apologize, I've added .withName to all styles in the project that use .withNestedSelectors and the errors no longer appear

[garronej]

@ArtemAstakhov Great! Thank you for the update!