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 + props + theme error + pigment components render + sx not working correctly #391

Open
francescovenica opened this issue Mar 18, 2025 · 1 comment
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 sendbox and go to 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 sendbox and go to 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 sendbox and go to 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 sendbox and go to issue-4 and replace

<MyStack></MyStack>

with

<Stack></Stack>

the app will crash.

Issue 5 - Can't style mui table

Open sendbox and go to 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
@francescovenica francescovenica changed the title Theme empty on ssr Theme empty on ssr + props + theme error + pigment components render + sx not working correctly Mar 21, 2025
@brijeshb42
Copy link
Contributor

Checking.

@brijeshb42 brijeshb42 assigned brijeshb42 and unassigned siriwatknp Mar 21, 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

4 participants