Theme empty on ssr

[francescovenica]

I'm working on the migration of an app in a Turborepo the was built with MUI 5 + Emotion + NextJS. I migrated 99% of the app but I'm getting a few errors in a few occasions.
I've tried to replicate all of them in a Codesanbox, tbh I'm not sure if I'm doing something wrong myself or if I'm missing some steps somewhere as I think these errors are triggered by a normal use of the app so I suppose people would already have flagged them, but I can't see what's wrong in this setup

Steps to reproduce

I've updated the codesandbox:
https://codesandbox.io/p/devbox/pcq54p

there is now an initial page that links to the issues:

Issue 1 - sx props not working correctly
Open url: https://codesandbox.io/p/devbox/pcq54p/issue-1 and remove:

sx={{ backgroundColor: "blue" }} 

the app will break, you will not be able to see the update and if you refresh the app will not load

Issue 2 - Props + theme not working together

Open url: https://codesandbox.io/p/devbox/pcq54p/issue-2 and remove the comment from:

backgroundColor: ({ hasError }) => hasError ? theme.colors.primary : theme.colors.secondary,

refresh the page and you will see the app broken

Issue 3 - empty theme on SSR (useMediaQuery)
Open url: https://codesandbox.io/p/devbox/pcq54p/issue-3 and update this line:

const isSmallScreen = "remove me"; // useMediaQuery(theme.breakpoints.down("sm"));

to be:

const isSmallScreen =  useMediaQuery(theme.breakpoints.down("sm"));

Issue 4 - Render a simple stack from @mui/material-pigment-css/Stack

Open url: https://codesandbox.io/p/devbox/pcq54p/issue-4 and replace

<MyStack></MyStack>

with

<Stack></Stack>

the app will crash.

Issue 5 - Can't style mui table

Open url: https://codesandbox.io/p/devbox/pcq54p/issue-5

The TableCell color is not applied

Issue 6 - I'm asked to install @emotion/server I suppose this should be installed as part o pigment or the documentation should be updated to warn about this.

Expected behavior

The app shouldn't crash with in these cases

Your environment

npx @mui/envinfo

  System:
    OS: macOS 15.3.1
  Binaries:
    Node: 20.12.2 - ~/.nvm/versions/node/v20.12.2/bin/node
    npm: 10.5.0 - ~/.nvm/versions/node/v20.12.2/bin/npm
    pnpm: 8.14.1 - /opt/homebrew/bin/pnpm
  Browsers:
    Chrome: 134.0.6998.89
    Edge: Not Found
    Safari: 18.3

"@mui/material-pigment-css": "6.4.7",
"@pigment-css/react": "0.0.29",
"@pigment-css/nextjs-plugin": "0.0.29",

Search keywords: theme ssr sx