[joy-ui] Cannot set `color` or `bgcolor` of `Box` when used in Next.js

[sixfold-origami]

Steps to reproduce

Link to live example: https://codesandbox.io/p/devbox/infallible-microservice-lkjwxw?file=%2Fsrc%2Fapp%2Fpage.tsx%3A9%2C26

Steps:

1. Set up a NextJS project with create-next-app
2. Add JoyUI, following this guide: https://mui.com/joy-ui/integrations/next-js-app-router/
3. Attempt to add a Box with the color or bgcolor set on the sx prop to a theme variable, such as primary.main. (Explicit colors like #008141 work fine.)

Current behavior

The box stays at the default colors

Expected behavior

The box changes to the color set. In this case, the primary color.

Context

I'm trying to make a colored box. Notably, if you inspect the box in devtools, it looks like "primary.main" is being passed through unmodified, as it shows up in the CSS properties, but is ignored as invalid. It looks like the normal theme transformation is being ignored somehow.

Your environment

npx @mui/envinfo

  System:
    OS: macOS 14.5
  Binaries:
    Node: 21.6.0 - ~/.nvm/versions/node/v21.6.0/bin/node
    npm: 10.2.4 - ~/.nvm/versions/node/v21.6.0/bin/npm
    pnpm: 9.2.0 - ~/.nvm/versions/node/v21.6.0/bin/pnpm
  Browsers:
    Chrome: Not Found
    Edge: Not Found
    Safari: 17.5
  npmPackages:
    @emotion/react: ^11.11.4 => 11.11.4 
    @emotion/styled: ^11.11.5 => 11.11.5 
    @mui/base:  5.0.0-beta.42 
    @mui/core-downloads-tracker:  6.0.0-dev.240424162023-9968b4889d 
    @mui/joy: ^5.0.0-beta.36 => 5.0.0-beta.36 
    @mui/private-theming:  6.0.0-dev.20240529-082515-213b5e33ab 
    @mui/styled-engine:  6.0.0-dev.20240529-082515-213b5e33ab 
    @mui/system:  6.0.0-dev.240424162023-9968b4889d 
    @mui/types:  7.2.14 
    @mui/utils:  6.0.0-dev.20240529-082515-213b5e33ab 
    @types/react: 18.3.3 => 18.3.3 
    react: ^18 => 18.3.1 
    react-dom: ^18 => 18.3.1 
    typescript:  5.4.5 

Using Firefox v126.0

Search keywords: nextjs joyui palette color box

[sixfold-origami]

As a workaround in the meantime, you can still use the CSS vars that the joy color tokens map to:

<Box 
  sx={{
    bgcolor: 'primary.main'
  }} 
/>

Becomes

<Box 
  sx={{
    bgcolor: 'var(--joy-palette-primary-500)'
  }} 
/>

[siriwatknp]

Thanks for reporting the issue! Joy UI development is temporarily on hold as the maintainers focus on the next two major releases of Material UI