Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Theme empty on ssr #391

Open
francescovenica opened this issue Mar 18, 2025 · 0 comments
Open

Theme empty on ssr #391

francescovenica opened this issue Mar 18, 2025 · 0 comments
Assignees
Labels
customization: theme Centered around the theming features package: system Specific to @mui/system status: waiting for maintainer These issues haven't been looked at yet by a maintainer

Comments

@francescovenica
Copy link

francescovenica commented Mar 18, 2025

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

@francescovenica francescovenica added the status: waiting for maintainer These issues haven't been looked at yet by a maintainer label Mar 18, 2025
@zannager zannager added package: system Specific to @mui/system customization: theme Centered around the theming features labels Mar 19, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
customization: theme Centered around the theming features package: system Specific to @mui/system status: waiting for maintainer These issues haven't been looked at yet by a maintainer
Projects
None yet
Development

No branches or pull requests

3 participants