Style of Select and Switch break (sometimes) with Nextjs

[PeerRich]

• [x] The issue is present in the latest release.
• [x] I have searched the issues of this repository and believe that this is not a duplicate.

Current Behavior 😯

Sometimes the and component miss styles:

I am using the latest Nextjs, Typescript and Material UI under the hood.

Steps to Reproduce 🕹

1. clone https://github.com/mui-org/material-ui/tree/master/examples/nextjs-with-typescript
2. use a switch and select component in latest chrome

Steps:

1. 2. 3. 4.

Context 🔦

Your Environment 🌎

Tech	Version
Material-UI	v4.?.?
React
Browser
TypeScript
etc.

oliviertassinari commented 4 years ago

Please provide a full reproduction test case. This would help a lot 👷 . A live example would be perfect. This codesandbox.io template may be a good starting point. Thank you!

PeerRich commented 4 years ago

Hey olivier, sorry for missing some context.

I found some more people having this issue with a temporal solution: https://stackoverflow.com/questions/58791674/material-ui-styles-flicker-in-and-disappear

by removing

//_app.js

React.useEffect(() => {
    // Remove the server-side injected CSS.
    const jssStyles = document.querySelector('#jss-server-side');
    if (jssStyles) {
      jssStyles.parentElement!.removeChild(jssStyles);
    }
  }, []);

it stopped flickering/breaking.

Anyone know why this code is in the _app.tsx example? https://github.com/mui-org/material-ui/tree/master/examples/nextjs-with-typescript

In other words: it works now, I'm just afraid removing this block will cause other side-effects/bugs

oliviertassinari commented 4 years ago

If you happen to have a minimal reproduction, let us know. Until then, I would recommend to start from the Next.js examples, the logic has been stress tested by the community, if you need to change the integration logic with Next.js, something is likely wrong in your pages.

PeerRich commented 4 years ago

I was able to reproduce it: https://youtu.be/7FkJQBvHJ9k

here is the full repo: https://github.com/PeerRich/bookface

PeerRich commented 4 years ago

Hey olivier, sorry for missing some context.

I found some more people having this issue with a temporal solution: https://stackoverflow.com/questions/58791674/material-ui-styles-flicker-in-and-disappear

by removing

//_app.js

React.useEffect(() => {
    // Remove the server-side injected CSS.
    const jssStyles = document.querySelector('#jss-server-side');
    if (jssStyles) {
      jssStyles.parentElement!.removeChild(jssStyles);
    }
  }, []);

it stopped flickering/breaking.

Anyone know why this code is in the _app.tsx example? https://github.com/mui-org/material-ui/tree/master/examples/nextjs-with-typescript

In other words: it works now, I'm just afraid removing this block will cause other side-effects/bugs

removing this is not a solution.

oliviertassinari commented 4 years ago

@PeerRich This look like a rendering mistmatch issue:

Warning: Prop className did not match. Server: "PrivateSwitchBase-input-228 MuiSwitch-input" Client: "PrivateSwitchBase-input-236 MuiSwitch-input"

I would recommend the follow: remove as many components from you app while maintaining this warning. It will give you more context on why a mismatch happen, and which logic cause it.

PeerRich commented 4 years ago

wow this was super helpful! somehow missed that error. Menus.js logic caused this error, now resolved! My bad, thank you @oliviertassinari

• © Githubissues.
• Githubissues is a development platform for aggregating issues.

[oliviertassinari]

Please provide a full reproduction test case. This would help a lot 👷 . A live example would be perfect. This codesandbox.io template may be a good starting point. Thank you!

[PeerRich]

Hey olivier, sorry for missing some context.

I found some more people having this issue with a temporal solution: https://stackoverflow.com/questions/58791674/material-ui-styles-flicker-in-and-disappear

by removing

//_app.js

React.useEffect(() => {
    // Remove the server-side injected CSS.
    const jssStyles = document.querySelector('#jss-server-side');
    if (jssStyles) {
      jssStyles.parentElement!.removeChild(jssStyles);
    }
  }, []);

it stopped flickering/breaking.

Anyone know why this code is in the _app.tsx example? https://github.com/mui-org/material-ui/tree/master/examples/nextjs-with-typescript

In other words: it works now, I'm just afraid removing this block will cause other side-effects/bugs

[oliviertassinari]

If you happen to have a minimal reproduction, let us know. Until then, I would recommend to start from the Next.js examples, the logic has been stress tested by the community, if you need to change the integration logic with Next.js, something is likely wrong in your pages.

[PeerRich]

I was able to reproduce it: https://youtu.be/7FkJQBvHJ9k

here is the full repo: https://github.com/PeerRich/bookface

[PeerRich]

Hey olivier, sorry for missing some context.

I found some more people having this issue with a temporal solution: https://stackoverflow.com/questions/58791674/material-ui-styles-flicker-in-and-disappear

by removing

//_app.js

React.useEffect(() => {
    // Remove the server-side injected CSS.
    const jssStyles = document.querySelector('#jss-server-side');
    if (jssStyles) {
      jssStyles.parentElement!.removeChild(jssStyles);
    }
  }, []);

it stopped flickering/breaking.

Anyone know why this code is in the _app.tsx example? https://github.com/mui-org/material-ui/tree/master/examples/nextjs-with-typescript

In other words: it works now, I'm just afraid removing this block will cause other side-effects/bugs

removing this is not a solution.

[oliviertassinari]

@PeerRich This look like a rendering mistmatch issue:

Warning: Prop className did not match. Server: "PrivateSwitchBase-input-228 MuiSwitch-input" Client: "PrivateSwitchBase-input-236 MuiSwitch-input"

I would recommend the follow: remove as many components from you app while maintaining this warning. It will give you more context on why a mismatch happen, and which logic cause it.

[PeerRich]

wow this was super helpful! somehow missed that error. Menus.js logic caused this error, now resolved! My bad, thank you @oliviertassinari