<h3 dir="auto">Problem description</h3>
<p dir="auto">After I have converted my ReactJS Application to server-side rendering, many of my material UI components have broken styles. The most notable example is the GridTile in the GridList. For example, I am loading some images, and the GridTile cellHeight property doesn't work as expected. It doesn't affect the Height of the GridTiles, as result the Image height is huge.</p>
<p dir="auto">Also, I am getting this warning almost on every component when I refreshing the page :</p>
<p dir="auto"><a target="_blank" rel="noopener noreferrer nofollow" href="https://user-images.githubusercontent.com/12649980/29446863-37db9200-83f7-11e7-821e-7a19776b57ed.png"><img src="https://user-images.githubusercontent.com/12649980/29446863-37db9200-83f7-11e7-821e-7a19776b57ed.png" alt="screenshot_20170818_092449" style="max-width: 100%;"></a></p>
<p dir="auto">I have Warped my  Component with MuiTheheProvider Like this:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content=" &lt;Provider {...store}&gt;
              &lt;MuiThemeProvider &gt;
                &lt;BrowserRouter forceRefresh={!supportsHistory}&gt;
                  &lt;TheApp /&gt;
                &lt;/BrowserRouter&gt;
              &lt;/MuiThemeProvider&gt;
            &lt;/Provider&gt;"><pre class="notranslate"><code class="notranslate"> &lt;Provider {...store}&gt;
              &lt;MuiThemeProvider &gt;
                &lt;BrowserRouter forceRefresh={!supportsHistory}&gt;
                  &lt;TheApp /&gt;
                &lt;/BrowserRouter&gt;
              &lt;/MuiThemeProvider&gt;
            &lt;/Provider&gt;
</code></pre></div>
<p dir="auto">Both on the server and on the client, also I have set these globals on my express server index.</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="global.navigator = global.navigator || {};
global.navigator.userAgent = global.navigator.userAgent || 'all';"><pre class="notranslate"><code class="notranslate">global.navigator = global.navigator || {};
global.navigator.userAgent = global.navigator.userAgent || 'all';
</code></pre></div>
<p dir="auto">Any Suggestions?</p>
<h3 dir="auto">Steps to reproduce</h3>
<h3 dir="auto">Versions</h3>
<ul dir="auto">
<li>Material-UI: ^0.18.7</li>
<li>React: 15.5.4</li>
<li>Browser: Google Chrome</li>
</ul>
<p dir="auto">Having an issue integrating material into an isomorphic react application. I believe it may be associated to the theme not being rendered on the server side, I have it included in both renders with matching user agents. An image and code is referenced below...</p>
<p dir="auto"><a target="_blank" rel="noopener noreferrer nofollow" href="https://cloud.githubusercontent.com/assets/488909/24217887/eadb848e-0f06-11e7-83b5-2fbfad4b64cb.png"><img width="841" alt="screen shot 2017-03-22 at 1 52 47 pm" src="https://cloud.githubusercontent.com/assets/488909/24217887/eadb848e-0f06-11e7-83b5-2fbfad4b64cb.png" style="max-width: 100%;"></a></p>
<p dir="auto">SERVER RENDER</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="// React route matching, server side rendering
  match(routerParams, (err, redirectLocation, renderProps) =&gt; {
    if (err) {
      const msg = 'Internal server error';
      if (env.NODE_ENV === 'development') {
        throw new Error(msg);
      }
      req[env.NAMESPACE].log.server(msg, 'error');
      return res.status(500).end('Internal server error');
    }
    if (!renderProps) return res.status(404).end('Not found');

    function renderView() {
      const materialStyle = React.createElement(MuiThemeProvider);
      const rootView = React.createElement(RouterContext, renderProps, materialStyle);
      const rootStyle = React.createElement(IsoStyle, {
        onInsertCss: (styles) =&gt; { css.push(styles._getCss()); },
      }, rootView);
      const rootRedux = React.createElement(Provider, { store }, rootStyle);
      const rootComponent = renderToString(rootRedux);
      const rootState = JSON.stringify(store.getState());
      const template = `
      &lt;!DOCTYPE html&gt;
      &lt;html&gt;
        &lt;head&gt;
          &lt;meta charset=&quot;utf-8&quot;&gt;
          &lt;title&gt;Astral | Demo&lt;/title&gt;
          &lt;script&gt;
            window.__ROOT_STATE__ = ${rootState};
          &lt;/script&gt;
          &lt;style&gt;${css.join('')}&lt;/style&gt;
        &lt;/head&gt;
        &lt;body&gt;
          &lt;div id=&quot;app-entry&quot;&gt;${rootComponent}&lt;/div&gt;
          &lt;script src=&quot;http://localhost:3001/render.bundle.js&quot;&gt;&lt;/script&gt;
        &lt;/body&gt;
      &lt;/html&gt;
      `;
      return template;
    }
    req[env.NAMESPACE].log.server('Render success', 'info');
    res.send(renderView());"><pre class="notranslate"><span class="pl-c">// React route matching, server side rendering</span>
  <span class="pl-s1">match</span><span class="pl-kos">(</span><span class="pl-s1">routerParams</span><span class="pl-kos">,</span> <span class="pl-kos">(</span><span class="pl-s1">err</span><span class="pl-kos">,</span> <span class="pl-s1">redirectLocation</span><span class="pl-kos">,</span> <span class="pl-s1">renderProps</span><span class="pl-kos">)</span> <span class="pl-c1">=&gt;</span> <span class="pl-kos">{</span>
    <span class="pl-k">if</span> <span class="pl-kos">(</span><span class="pl-s1">err</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
      <span class="pl-k">const</span> <span class="pl-s1">msg</span> <span class="pl-c1">=</span> <span class="pl-s">'Internal server error'</span><span class="pl-kos">;</span>
      <span class="pl-k">if</span> <span class="pl-kos">(</span><span class="pl-s1">env</span><span class="pl-kos">.</span><span class="pl-c1">NODE_ENV</span> <span class="pl-c1">===</span> <span class="pl-s">'development'</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
        <span class="pl-k">throw</span> <span class="pl-k">new</span> <span class="pl-v">Error</span><span class="pl-kos">(</span><span class="pl-s1">msg</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
      <span class="pl-kos">}</span>
      <span class="pl-s1">req</span><span class="pl-kos">[</span><span class="pl-s1">env</span><span class="pl-kos">.</span><span class="pl-c1">NAMESPACE</span><span class="pl-kos">]</span><span class="pl-kos">.</span><span class="pl-c1">log</span><span class="pl-kos">.</span><span class="pl-en">server</span><span class="pl-kos">(</span><span class="pl-s1">msg</span><span class="pl-kos">,</span> <span class="pl-s">'error'</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
      <span class="pl-k">return</span> <span class="pl-s1">res</span><span class="pl-kos">.</span><span class="pl-en">status</span><span class="pl-kos">(</span><span class="pl-c1">500</span><span class="pl-kos">)</span><span class="pl-kos">.</span><span class="pl-en">end</span><span class="pl-kos">(</span><span class="pl-s">'Internal server error'</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
    <span class="pl-kos">}</span>
    <span class="pl-k">if</span> <span class="pl-kos">(</span><span class="pl-c1">!</span><span class="pl-s1">renderProps</span><span class="pl-kos">)</span> <span class="pl-k">return</span> <span class="pl-s1">res</span><span class="pl-kos">.</span><span class="pl-en">status</span><span class="pl-kos">(</span><span class="pl-c1">404</span><span class="pl-kos">)</span><span class="pl-kos">.</span><span class="pl-en">end</span><span class="pl-kos">(</span><span class="pl-s">'Not found'</span><span class="pl-kos">)</span><span class="pl-kos">;</span>

    <span class="pl-k">function</span> <span class="pl-en">renderView</span><span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
      <span class="pl-k">const</span> <span class="pl-s1">materialStyle</span> <span class="pl-c1">=</span> <span class="pl-v">React</span><span class="pl-kos">.</span><span class="pl-en">createElement</span><span class="pl-kos">(</span><span class="pl-v">MuiThemeProvider</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
      <span class="pl-k">const</span> <span class="pl-s1">rootView</span> <span class="pl-c1">=</span> <span class="pl-v">React</span><span class="pl-kos">.</span><span class="pl-en">createElement</span><span class="pl-kos">(</span><span class="pl-v">RouterContext</span><span class="pl-kos">,</span> <span class="pl-s1">renderProps</span><span class="pl-kos">,</span> <span class="pl-s1">materialStyle</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
      <span class="pl-k">const</span> <span class="pl-s1">rootStyle</span> <span class="pl-c1">=</span> <span class="pl-v">React</span><span class="pl-kos">.</span><span class="pl-en">createElement</span><span class="pl-kos">(</span><span class="pl-v">IsoStyle</span><span class="pl-kos">,</span> <span class="pl-kos">{</span>
        <span class="pl-en">onInsertCss</span>: <span class="pl-kos">(</span><span class="pl-s1">styles</span><span class="pl-kos">)</span> <span class="pl-c1">=&gt;</span> <span class="pl-kos">{</span> <span class="pl-s1">css</span><span class="pl-kos">.</span><span class="pl-en">push</span><span class="pl-kos">(</span><span class="pl-s1">styles</span><span class="pl-kos">.</span><span class="pl-en">_getCss</span><span class="pl-kos">(</span><span class="pl-kos">)</span><span class="pl-kos">)</span><span class="pl-kos">;</span> <span class="pl-kos">}</span><span class="pl-kos">,</span>
      <span class="pl-kos">}</span><span class="pl-kos">,</span> <span class="pl-s1">rootView</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
      <span class="pl-k">const</span> <span class="pl-s1">rootRedux</span> <span class="pl-c1">=</span> <span class="pl-v">React</span><span class="pl-kos">.</span><span class="pl-en">createElement</span><span class="pl-kos">(</span><span class="pl-v">Provider</span><span class="pl-kos">,</span> <span class="pl-kos">{</span> store <span class="pl-kos">}</span><span class="pl-kos">,</span> <span class="pl-s1">rootStyle</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
      <span class="pl-k">const</span> <span class="pl-s1">rootComponent</span> <span class="pl-c1">=</span> <span class="pl-en">renderToString</span><span class="pl-kos">(</span><span class="pl-s1">rootRedux</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
      <span class="pl-k">const</span> <span class="pl-s1">rootState</span> <span class="pl-c1">=</span> <span class="pl-c1">JSON</span><span class="pl-kos">.</span><span class="pl-en">stringify</span><span class="pl-kos">(</span><span class="pl-s1">store</span><span class="pl-kos">.</span><span class="pl-en">getState</span><span class="pl-kos">(</span><span class="pl-kos">)</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
      <span class="pl-k">const</span> <span class="pl-s1">template</span> <span class="pl-c1">=</span> <span class="pl-s">`</span>
<span class="pl-s">      &lt;!DOCTYPE html&gt;</span>
<span class="pl-s">      &lt;html&gt;</span>
<span class="pl-s">        &lt;head&gt;</span>
<span class="pl-s">          &lt;meta charset="utf-8"&gt;</span>
<span class="pl-s">          &lt;title&gt;Astral | Demo&lt;/title&gt;</span>
<span class="pl-s">          &lt;script&gt;</span>
<span class="pl-s">            window.__ROOT_STATE__ = <span class="pl-s1"><span class="pl-kos">${</span><span class="pl-s1">rootState</span><span class="pl-kos">}</span></span>;</span>
<span class="pl-s">          &lt;/script&gt;</span>
<span class="pl-s">          &lt;style&gt;<span class="pl-s1"><span class="pl-kos">${</span><span class="pl-s1">css</span><span class="pl-kos">.</span><span class="pl-en">join</span><span class="pl-kos">(</span><span class="pl-s">''</span><span class="pl-kos">)</span><span class="pl-kos">}</span></span>&lt;/style&gt;</span>
<span class="pl-s">        &lt;/head&gt;</span>
<span class="pl-s">        &lt;body&gt;</span>
<span class="pl-s">          &lt;div id="app-entry"&gt;<span class="pl-s1"><span class="pl-kos">${</span><span class="pl-s1">rootComponent</span><span class="pl-kos">}</span></span>&lt;/div&gt;</span>
<span class="pl-s">          &lt;script src="http://localhost:3001/render.bundle.js"&gt;&lt;/script&gt;</span>
<span class="pl-s">        &lt;/body&gt;</span>
<span class="pl-s">      &lt;/html&gt;</span>
<span class="pl-s">      `</span><span class="pl-kos">;</span>
      <span class="pl-k">return</span> <span class="pl-s1">template</span><span class="pl-kos">;</span>
    <span class="pl-kos">}</span>
    <span class="pl-s1">req</span><span class="pl-kos">[</span><span class="pl-s1">env</span><span class="pl-kos">.</span><span class="pl-c1">NAMESPACE</span><span class="pl-kos">]</span><span class="pl-kos">.</span><span class="pl-c1">log</span><span class="pl-kos">.</span><span class="pl-en">server</span><span class="pl-kos">(</span><span class="pl-s">'Render success'</span><span class="pl-kos">,</span> <span class="pl-s">'info'</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
    <span class="pl-s1">res</span><span class="pl-kos">.</span><span class="pl-en">send</span><span class="pl-kos">(</span><span class="pl-en">renderView</span><span class="pl-kos">(</span><span class="pl-kos">)</span><span class="pl-kos">)</span><span class="pl-kos">;</span></pre></div>
<p dir="auto">CLIENT RENDER</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="render() {
    return (
      &lt;div id=&quot;base-view&quot;&gt;
        &lt;MuiThemeProvider&gt;
          {this.props.children}
        &lt;/MuiThemeProvider&gt;
      &lt;/div&gt;
    );
  }"><pre class="notranslate"><code class="notranslate">render() {
    return (
      &lt;div id="base-view"&gt;
        &lt;MuiThemeProvider&gt;
          {this.props.children}
        &lt;/MuiThemeProvider&gt;
      &lt;/div&gt;
    );
  }
</code></pre></div>
<h3 dir="auto">Versions</h3>
<ul dir="auto">
<li>Material-UI: 0.17.1</li>
<li>React: 15.4.2</li>
<li>Browser: Chrome</li>
</ul>