Material-ui: react-apollo-hooks integration with @material-ui/styles

[wingertge]

• [x] This is not a v0.x issue.
• [x] I have searched the issues of this repository and believe that this is not a duplicate.

Expected Behavior 🤔

Server should preload data using Apollo, render a CircularProgress while loading and then the content once the data is present. This was working in v3.x and is a pretty normal real-world use case.

Current Behavior 😯

There is a class name mismatch on the TextField/Avatar element. If I use a component other than TextField or Avatar (those are the ones I found so far anyway; Button is confirmed working without issue), or if the loading component is null, there is no error.

Steps to Reproduce 🕹

Link: https://codesandbox.io/s/l7j61qr96l?fontsize=14
The sandbox won't work obviously, due to the lack of a real API and server-side rendering, but this is the minimal example that causes the issue in my App.

1. Load data via a query and render a component while loading
2. Use a TextField/Avatar/potentially some other components in the real display output
3. Get a class name mismatch

Context 🔦

Your Environment 🌎

| Tech | Version |
|--------------|---------|
| Material-UI | v4.0.0-alpha.7 |
| React | v16.8.3 |
| ApolloClient | v2.5.1 |

[wingertge]

Update: This also appears to happen if there is a list rendered using deferred query data.

[oliviertassinari]

Could you provide a minimale reproduction repository?

[wingertge]

This is as minimal as I could get it, it's just a razzle boilerplate with the most minimal mui/apollo SSR setup
https://github.com/wingertge/mui-classname-bug

[oliviertassinari]

@wingertge This change solves the problem:

--- a/app/src/server.js
+++ b/app/src/server.js
@@ -36,7 +36,7 @@ server
         const sheets = new ServerStyleSheets()

         const markup = await getMarkupFromTree({
-            tree: sheets.collect(
+            tree: (
                 <ApolloProvider client={client}>
                     <ThemeProvider theme={theme}>
                         <StaticRouter context={context} location={req.url}>
@@ -46,7 +46,7 @@ server
                     </ThemeProvider>
                 </ApolloProvider>
             ),
-            renderFunction: renderToString
+            renderFunction: tree => renderToString(sheets.collect(tree))
         })

The problem with the first approach is that it render an extra circular progress that is not present on the client. The rendered tree doesn't match. The index doesn't match, the class names break.

We have few leverages. One is #6115, another one is #15140.