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] Add warning when using noSsr incorrectly #44624

Open
wants to merge 1 commit into
base: master
Choose a base branch
from

Conversation

siriwatknp
Copy link
Member

closes #44576

@siriwatknp siriwatknp added package: material-ui Specific to @mui/material customization: theme Centered around the theming features dx Related to developers' experience labels Dec 2, 2024
@siriwatknp siriwatknp requested a review from DiegoAndai December 2, 2024 06:19
@mui-bot
Copy link

mui-bot commented Dec 2, 2024

Netlify deploy preview

https://deploy-preview-44624--material-ui.netlify.app/

Bundle size report

No bundle size changes (Toolpad)
No bundle size changes

Generated by 🚫 dangerJS against 7a84d5b

@aarongarciah aarongarciah changed the title Add warning when using noSsr incorrectly [material-ui] Add warning when using noSsr incorrectly Dec 2, 2024
Copy link
Member

@DiegoAndai DiegoAndai left a comment

Choose a reason for hiding this comment

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

I think this is more accurate:

MUI: The noSsr prop must be used with cssVariables: true.

As that's the provider that supports the noSsr prop.

console.error(
[
'MUI: The `noSsr` prop must be used with the theme that contains light and dark colorSchemes.',
'See https://mui.com/material-ui/customization/dark-mode/#built-in-support for more details.',
Copy link
Member

Choose a reason for hiding this comment

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

Same feedback as in #43783 (comment).

export default function ThemeProviderNoVars<Theme = DefaultTheme>({
theme: themeInput,
...props
}: ThemeProviderNoVarsProps<Theme>): React.ReactElement<ThemeProviderNoVarsProps<Theme>> {
const scopedTheme = THEME_ID in themeInput ? themeInput[THEME_ID] : undefined;
if (process.env.NODE_ENV !== 'production') {
// @ts-ignore
if (process.env.NODE_ENV !== 'test' && props.noSsr && !warnedOnceNoSsr) {
Copy link
Member

Choose a reason for hiding this comment

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

The test env check seems suspicious. Do we have leaks in our own tests?

Suggested change
if (process.env.NODE_ENV !== 'test' && props.noSsr && !warnedOnceNoSsr) {
if (props.noSsr && !warnedOnceNoSsr) {

export default function ThemeProviderNoVars<Theme = DefaultTheme>({
theme: themeInput,
...props
}: ThemeProviderNoVarsProps<Theme>): React.ReactElement<ThemeProviderNoVarsProps<Theme>> {
const scopedTheme = THEME_ID in themeInput ? themeInput[THEME_ID] : undefined;
if (process.env.NODE_ENV !== 'production') {
Copy link
Member

@oliviertassinari oliviertassinari Dec 4, 2024

Choose a reason for hiding this comment

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

Would it make sense to run this test inside ThemeProvider.tsx rather than in this file? It seems that it could be easier to refactor down the line.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
customization: theme Centered around the theming features dx Related to developers' experience package: material-ui Specific to @mui/material
Projects
None yet
Development

Successfully merging this pull request may close these issues.

New noSsr prop of ThemeProvider throws warning
4 participants