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

[material-ui][joy-ui] Add InitColorSchemeScript for Next.js App Router #42829

Merged
merged 7 commits into from
Jul 3, 2024

Conversation

siriwatknp
Copy link
Member

@siriwatknp siriwatknp commented Jul 3, 2024

Cherry picked from #42247 to unblock MUI X on mui/mui-x#13712

@siriwatknp siriwatknp added package: material-ui Specific to @mui/material v5.x package: joy-ui Specific to @mui/joy labels Jul 3, 2024
@siriwatknp siriwatknp changed the title [material-ui][joy-ui] Add InitColorSchemeScript for Next.js App Router (#42247) [material-ui][joy-ui] Add InitColorSchemeScript for Next.js App Router Jul 3, 2024
@@ -121,23 +121,47 @@ If you try to render your UI based on the server, before mounting on the client,

### Avoiding screen flickering

To [prevent the UI from flickering](/joy-ui/main-features/dark-mode-optimization/#the-problem-flickering-on-first-load), apply `getInitColorSchemeScript()` before the main application script-it varies across frameworks:
To [prevent the UI from flickering](/joy-ui/main-features/dark-mode-optimization/#the-problem-flickering-on-first-load), apply `<InitColorSchemeScript />` before the main application script-it varies across frameworks:
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
To [prevent the UI from flickering](/joy-ui/main-features/dark-mode-optimization/#the-problem-flickering-on-first-load), apply `<InitColorSchemeScript />` before the main application script-it varies across frameworks:
To [prevent the UI from flickering](/joy-ui/main-features/dark-mode-optimization/#the-problem-flickering-on-first-load), add the `<InitColorSchemeScript />` component before the `<CssVarsProvider />` component:

Maybe rephrase, as it is no longer a script.

Copy link
Member

@mnajdova mnajdova left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I've added one comment on the instructions. As it is cherry-pick I am not diving too deep into the implementaiton.

@github-actions github-actions bot added the PR: out-of-date The pull request has merge conflicts and can't be merged label Jul 3, 2024
@github-actions github-actions bot removed the PR: out-of-date The pull request has merge conflicts and can't be merged label Jul 3, 2024
@siriwatknp siriwatknp merged commit a2972e8 into mui:master Jul 3, 2024
21 checks passed
@cherniavskii
Copy link
Member

Thanks @siriwatknp
I've added a comment about this in #42247 (comment) before I discovered this PR 👍🏻

To double-check, is the deprecation notice intentional for the v5?
Since the getInitColorSchemeScript is still available in v6 (and deprecated), perhaps v5 shouldn't log deprecation messages that could e.g. make the tests fail?

@siriwatknp
Copy link
Member Author

To double-check, is the deprecation notice intentional for the v5?
Since the getInitColorSchemeScript is still available in v6 (and deprecated), perhaps v5 shouldn't log deprecation messages that could e.g. make the tests fail?

Yes, the deprecation should happen on v6. I will open another PR to remove the warning.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
package: joy-ui Specific to @mui/joy package: material-ui Specific to @mui/material v5.x
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

4 participants