[TextField] Outlined label gap is delayed after server-side hydration

[taime]

After page load, the first time elements has default browser css styles and only after 1-3 second they became as they should be (look at the video https://cl.ly/c374d670fe2a )

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

Current Behavior 😯

I see changing styles while the page is being rendered. Here is video with the issue video of the issue.

Expected Behavior 🤔

Render correctly styled element immediately

Steps to Reproduce 🕹

Steps:

1. Clone the repo https://github.com/mui-org/material-ui/tree/master/examples/nextjs
2. Add any element (I use the <TextField Element variant="outlined" /> for example)
3. Push The Refresh button in you browser and you will see this issue

Your Environment 🌎

Tech	Version
Material-UI	v4.4.0
React	latest
Browser	Chrome
OS	Mac OS

[oliviertassinari]

I use the <TextField Element variant="outlined" />

This is expected, we rely on the availability of the layout measurements to correctly position the gap for the label. You could work around the problem by setting a background color to the label that matches the background. We could document this limitation in https://material-ui.com/components/text-fields/#limitations. Do you want to handle it? :)

[adeelibr]

I use the <TextField Element variant="outlined" />

This is expected, we rely on the availability of the layout measurements to correctly position the gap for the label. You could work around the problem by setting a background color to the label that matches the background. We could document this limitation in https://material-ui.com/components/text-fields/#limitations. Do you want to handle it? :)

@oliviertassinari Can I document this if possible 😄

[joshwooding]

It would be nice for this to wait for #17483

[oliviertassinari]

Agree, we should also wait for the direction #17680 takes.

[oliviertassinari]

We have found a solid solution in #17680. It should do it.