Mismatch of styles when using dynamic styles

[Kyderman]

Hey,

I am currently converting on app over to use Next.js / TSS, we have a bunch of styling that is done dynamically using classNames

Now I have something like so.

<Avatar
  className={classNames(classes.titleAvatar, {
    [classes.titleAvatarEmpty]: isLoadedEmpty,
  })}
>
  <EventIcon></EventIcon>
</Avatar>

On the server, one style is used, on the client another is used therefore I get the hydration error.

My question here is do I just need to have the component not render in SSR or can I have this mismatch handled better?
Thanks

[garronej]

Hey @Kyderman,

You can't the classNames utility anymore. You have to use cx that is returned by useStyles(): const {classes, cx} = useStyles().
The good news is that TSS is able to give higher priority to the last classes in the list which is an increadibly powerfull feature.

Also have setup MUI for SSR or used the tooling provided by TSS? https://docs.tss-react.dev/ssr/next.js#single-emotion-cache

[Kyderman]

Hey, ive setup for use with SSR / MUI.

Ive just changed to cx and the problem persists where the dynamic class is applied on server vs not on client, probably because theres a graphql call made which changes that logic, so I think ill just have to render client side in these cases, thanks

[garronej]

Thanks for the update.
Are you using Next 13 beta feature like appdir or server component? 🤔