title: Class name hydration mismatch in server and client, (Warning: Prop `className` did not match Server and Client)
body: <p>I don't know my issue is a <strong>bug</strong> or just a <strong>support</strong> term or just a <strong>configuration</strong> mismach, but I spend much time, Not happy go lucky writing here to somebody settle my issue. no!</p>
  
  <p>I searched for 3 days, Even just sleep about 10 hours in this 3 days, try many ways, even I use <a href="https://gitter.im/mui-org/material-ui" rel="nofollow noreferrer">Gitter</a> but no one answer me, I see issues <a href="https://github.com/mui-org/material-ui/issues/10982" rel="nofollow noreferrer">#10982</a> and <a href="https://github.com/mui-org/material-ui/issues/11506" rel="nofollow noreferrer">#11506</a> and many <code>Stack Overflow</code> question and answers but I couldn't fix my issue and didn't find right way.</p>
  
  <p>Absolutely I read and read many times the <code>Material-UI</code> <a href="https://material-ui.com/guides/right-to-left/" rel="nofollow noreferrer">Docs</a> but I exactly did what the Docs said. </p>
  
  <p>At last, I see class name hydration mismatch in server and client,  this warning:</p>
  
  <pre><code>Warning: Prop `className` did not match. Server: "MuiFormLabel-root-134 MuiInputLabel-root-129 MuiInputLabel-formControl-130 MuiInputLabel-animated-133" Client: "MuiFormLabel-root-10 MuiInputLabel-root-5 MuiInputLabel-formControl-6 MuiInputLabel-animated-9"
  </code></pre>
  
  <p>I swear I tried many ways and searched a lot. I'm using <code>Material-UI</code> version <code>1.2.1</code>.</p>
  
  <p>This is my <code>Index</code> component as a root component:</p>
  
  <pre><code>import React, {Component} from 'react';
  import Helmet from 'react-helmet';
  import styles from 'StylesRoot/styles.pcss';
  import TextField from '@material-ui/core/TextField';
  
  export default class App extends Component {
  
      render() {
          return (
              &lt;div className={styles['root-wrapper']}&gt;
                  &lt;Helmet
                      htmlAttributes={{lang: 'fa', amp: undefined}}
                      bodyAttributes={{dir: 'rtl'}}
                      titleTemplate='اسکن - %s'
                      titleAttributes={{itemprop: 'name', lang: 'fa'}}
                      meta={[
                          {name: 'description', content: 'صفحه اتصال اعضاء'},
                          {name: 'viewport', content: 'width=device-width, initial-scale=1'},
                      ]}
                      link={[{rel: 'stylesheet', href: '/dist/styles.css'}]}
                  /&gt;
                  &lt;TextField label='test' helperText='help'/&gt;
              &lt;/div&gt;
          );
      };
  }
  </code></pre>
  
  <p>Here below you can see my <code>server.jsx</code> and <code>client.jsx</code>:</p>
  
  <pre><code>//--------------------------------------------client.jsx
  import React from 'react';
  import {hydrate} from 'react-dom';
  import {BrowserRouter} from 'react-router-dom';
  import {MuiThemeProvider, createMuiTheme} from '@material-ui/core/styles';
  import {lightBlue, red} from '@material-ui/core/colors';
  import Index from './app/index';
  import RTL from './app/public/rtl';
  
  const theme = createMuiTheme({
      palette: {
          primary: lightBlue,
          accent: red,
          type: 'light',
      },
      direction: 'rtl',
  });
  
  class Main extends React.Component {
      // Remove the server-side injected CSS.
      componentDidMount() {
          const jssStyles = document.getElementById('jss-server-side');
          if (jssStyles &amp;&amp; jssStyles.parentNode) {
              jssStyles.parentNode.removeChild(jssStyles);
          }
      }
  
      render() {
          return (
              &lt;BrowserRouter&gt;
                  &lt;Index {...this.props}/&gt;
              &lt;/BrowserRouter&gt;
          );
      }
  }
  
  hydrate((
      &lt;RTL&gt;
          &lt;MuiThemeProvider theme={theme}&gt;
              &lt;Main/&gt;
          &lt;/MuiThemeProvider&gt;
      &lt;/RTL&gt;
  ), document.getElementById('root'));
  
  
  
  //--------------------------------------------server.jsx
  import React from 'react';
  import {renderToString} from 'react-dom/server';
  import {SheetsRegistry} from 'react-jss/lib/jss';
  import JssProvider from 'react-jss/lib/JssProvider';
  import {StaticRouter} from 'react-router-dom';
  import {Helmet} from "react-helmet";
  import {MuiThemeProvider, createMuiTheme, createGenerateClassName} from '@material-ui/core/styles';
  import {red, lightBlue} from '@material-ui/core/colors';
  import Template from './app/template';
  import Index from './app/index';
  import RTL from './app/public/rtl';
  
  export default function serverRenderer({clientStats, serverStats}) {
      return (req, res, next) =&gt; {
          const context = {};
          const sheetsRegistry = new SheetsRegistry();
          const theme = createMuiTheme({
              palette: {
                  primary: lightBlue,
                  accent: red,
                  type: 'light',
              },
              direction: 'rtl',
          });
          const generateClassName = createGenerateClassName();
          const markup = renderToString(
              &lt;JssProvider registry={sheetsRegistry} generateClassName={generateClassName}&gt;
                  &lt;RTL&gt;
                      &lt;MuiThemeProvider theme={theme} sheetsManager={new Map()}&gt;
                          &lt;StaticRouter location={req.url} context={context}&gt;
                              &lt;Index/&gt;
                          &lt;/StaticRouter&gt;
                      &lt;/MuiThemeProvider&gt;
                  &lt;/RTL&gt;
              &lt;/JssProvider&gt;
          );
          const helmet = Helmet.renderStatic();
  
          const jss = sheetsRegistry.toString();
  
          res.status(200).send(Template({
              markup: markup,
              helmet: helmet,
              jss: jss,
          }));
      };
  }
  </code></pre>
  
  <p>So now it's needed to <code>template.jsx</code>:</p>
  
  <pre><code>export default ({ markup, helmet, jss }) =&gt; {
      return `&lt;!DOCTYPE html&gt;
              &lt;html ${helmet.htmlAttributes.toString()}&gt;
                  &lt;head&gt;
                      ${helmet.title.toString()}
                      ${helmet.meta.toString()}                   
                      ${helmet.link.toString()}
                      &lt;style id='jss-server-side'&gt;${jss}&lt;/style&gt;                                  
                  &lt;/head&gt;
                  &lt;body ${helmet.bodyAttributes.toString()}&gt;
                      &lt;div id='root'&gt;${markup}&lt;/div&gt;
                      &lt;script src='/dist/client.js' async&gt;&lt;/script&gt;
                  &lt;/body&gt;
              &lt;/html&gt;`;
  };
  </code></pre>
  
  <p>Ok, Now it is possible that this question is asked <em>What is <code>RTL</code>?</em> and <em>Why you wrap <code>MuiThemeProvider</code> inside it in both server and client?</em></p>
  
  <p>So first see <code>RTL</code> component:</p>
  
  <pre><code>import React from 'react';
  import {create} from 'jss';
  import rtl from 'jss-rtl';
  import JssProvider from 'react-jss/lib/JssProvider';
  import {createGenerateClassName, jssPreset} from '@material-ui/core/styles';
  
  const jss = create({plugins: [...jssPreset().plugins, rtl()]});
  
  const generateClassName = createGenerateClassName();
  
  export default props =&gt; (
      &lt;JssProvider jss={jss} generateClassName={generateClassName}&gt;
          {props.children}
      &lt;/JssProvider&gt;
  );
  </code></pre>
  
  <p>I saw it in <code>Material-UI</code> <a href="https://material-ui.com/guides/right-to-left/" rel="nofollow noreferrer">Docs</a> and I believe the documentation is a little poor and could be improved. I asked myself, <em>Why documentation pass a <code>props.children</code> for this function?</em> and I guess maybe this function should wrap something. so I try many shapes and it works. but in the first call in browser after build. when I refresh the browser then the warning appears  and I see this damn shape:</p>
  
  <p><img src="https://user-images.githubusercontent.com/10472437/42975235-4c853418-8bd0-11e8-8b8d-4e0080ca2a5f.png" alt="image"></p>
  
  <p>Surely I wanna see below shape, but I see it just once after build:</p>
  
  <p><img src="https://user-images.githubusercontent.com/10472437/42975444-63973a9c-8bd1-11e8-96c0-ed2e544017b8.png" alt="image"></p>
  
  <p>I don't know what is going wrong. I leave an issue on <a href="https://github.com/mui-org/material-ui/issues/12203" rel="nofollow noreferrer"><code>Github</code></a> too. And upload a <a href="https://gitlab.com/amerllica/varizHell" rel="nofollow noreferrer">mini repo</a> for this issue, for seeing my issue just <code>pull</code>, and run <code>npm install</code> then <code>num run dev</code>. the project is accessible on <a href="http://localhost:4000" rel="nofollow noreferrer">localhost:4000</a></p>