Prop `className` did not match.

[nphmuller]

Prop `className` did not match.

[ArtemAstakhov]

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

[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.

[garronej]

@ArtemAstakhov Great! Thank you for the update!