[joy-ui] Cannot set `color` or `bgcolor` of `Box` when used in Next.js
Open
@siriwatknp is already working on this.
Since Jun 10, 2024.
nextjs
on hold
package: joy-ui
scope: all components
- Dominant language
- JavaScript
- Stars
- 99.1k
- Forks
- 32.5k
- Avg merge
- 2d 17h
- Merged PRs (30d)
- 106
Description
Steps to reproduce
Link to live example: https://codesandbox.io/p/devbox/infallible-microservice-lkjwxw?file=%2Fsrc%2Fapp%2Fpage.tsx%3A9%2C26
Steps:
- Set up a NextJS project with
create-next-app - Add JoyUI, following this guide: https://mui.com/joy-ui/integrations/next-js-app-router/
- Attempt to add a
Boxwith thecolororbgcolorset on thesxprop to a theme variable, such asprimary.main. (Explicit colors like#008141work 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
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Assessment
This issue has not been assessed yet.