[styles] Strict Mode support #18018
Description
First of all, thank you all very much for the amazing material-ui.
I started my project from https://github.com/mui-org/material-ui/tree/master/examples/nextjs
Lately, I started to notice that my page after hydration looked weird - some styles were missing and some other times they were not applied to the expected elements.
Using React.StrictMode it tells me the following error:
Warning: Prop className did not match. Server: "MuiSvgIcon-root makeStyles-lightBulb-47" Client: "MuiSvgIcon-root makeStyles-lightBulb-48"
Current Behavior 😯
Looks like the classNames generated at server rendering are different to the ones generated at browser rendering time.
Expected Behavior 🤔
Server-side rendering and client-side rendering should generate the same class names.
Steps to Reproduce 🕹
Steps (Code Sandbox):
- https://codesandbox.io/s/nextjs-hge3h:
- Open developer tools (F12) and refresh code sandbox:
- You'll see:
Warning: PropclassNamedid not match. Server: "MuiSvgIcon-root makeStyles-lightBulb-47" Client: "MuiSvgIcon-root makeStyles-lightBulb-48"
Steps (Running locally)
- git clone https://github.com/bmvantunes/material-ui.git
- cd material-ui/examples/nextjs
- npm install
- npm run dev
- Open the browser, F12 and you'll see the error:
Warning: PropclassNamedid not match. Server: "MuiSvgIcon-root makeStyles-lightBulb-47" Client: "MuiSvgIcon-root makeStyles-lightBulb-48"
Context 🔦
The reproduction of the error will look something like:
The only difference between my repository (example) and material-ui/examples/nextjs is the React.StrictMode instead of React.Fragment inside _app.js
Your Environment 🌎
| Tech | Version |
|---|---|
| Material-UI | latest (4.51) |
| React | latest (16.11.0) |
| Browser | Any browser |
| Node | 12 |
| Nextjs | latest (9.1.1) |
PS - I saw that in the past some issues were created for something similar to this, but I couldn't apply the solutions on those issues to this specific issue. Most of those issues were using styled-components and none was using the material-ui example.