search

mui / material-ui

Material UI: Comprehensive React component library that implements Google's Material Design. Free forever.
https://mui.com/material-ui/
MIT License
93.77k stars 32.25k forks source link

joyui + nextjs + template some theme colors loads after initial page load #43191

Open dashkan opened 2 months ago

dashkan commented 2 months ago

Steps to reproduce

Link to live example: (Stackblitz)

Steps:

  1. Using https://github.com/mui/material-ui/tree/master/docs/data/joy/getting-started/templates/order-dashboard as inspiration
  2. And nextjs integration here
  3. The "Used Space" w/ warning color loads using primary color and then changes to warning color after load.
  4. This can be somewhat mitigated by setting color property to all children of the card component. Even doing that some elements children change their color after the page has loaded. For example, setting LinearProgress border still flickers / changes color when it's color property is set to warning.
  5. Make sure browser is wide enough (Desktop experience) to see the side navigation

nextjs-joyui

Current behavior

Theme color is loaded after initial nextjs render

Expected behavior

Theme color is loaded during initial page render

Context

Not have theme color flickering on page load

Your environment

npx @mui/envinfo ``` System: OS: macOS 14.6 Binaries: Node: 20.15.1 - ~/.nvm/versions/node/v20.15.1/bin/node npm: 10.7.0 - ~/.nvm/versions/node/v20.15.1/bin/npm pnpm: 9.6.0 - ~/.nvm/versions/node/v20.15.1/bin/pnpm Browsers: Chrome: 127.0.6533.89 Edge: 127.0.2651.86 Safari: 17.6 npmPackages: @emotion/react: catalog: => 11.13.0 @emotion/styled: catalog: => 11.13.0 @mui/icons-material: catalog: => 5.16.6 @mui/joy: catalog: => 5.0.0-beta.48 @types/react: catalog: => 18.3.3 react: catalog: => 18.3.1 react-dom: catalog: => 18.3.1 typescript: catalog: => 5.5.4 ```

Search keywords: joyui nextjs theme reload flicker

siriwatknp commented 2 months ago

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