The "Used Space" w/ warning color loads using primary color and then changes to warning color after load.
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.
Make sure browser is wide enough (Desktop experience) to see the side navigation
Steps to reproduce
Link to live example: (Stackblitz)
Steps:
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
``` 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 ```npx @mui/envinfo
Search keywords: joyui nextjs theme reload flicker