<p dir="auto">I have an app using material-ui and SSR. On some pages of my app, I get a warning like:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="Warning: Prop `className` did not match. Server: .... &quot;a-224 b-231 c-241 d-293&quot; Client: &quot;a-224 b-231 c-241 d-284&quot;"><pre class="notranslate"><code class="notranslate">Warning: Prop `className` did not match. Server: .... "a-224 b-231 c-241 d-293" Client: "a-224 b-231 c-241 d-284"
</code></pre></div>
<p dir="auto">(I replaced the long classnames with a, b, c, d). But the mismatch is on the "suffix" of the last className. "d-293" on server vs "d-284" on client.</p>
<p dir="auto">So it seems that at some point, there is some classes added on the server and not on the client, and it's breaking the classes index suffix.<br>
I tried to trace the problem, and wanted to detect the problem to show an example but it's quite difficult.</p>
<p dir="auto">I do have a lot of "Hidden" components in my app, and as I'm using SSR, I use the css implementation. As soon as I switch on the JS one, the problem disappear.</p>
<p dir="auto">I was wondering if there is some builtin tool to debug the generator on the server and on the client, so I could more easily understand the problem ?</p>


<ul class="contains-task-list">
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox" checked=""> I have searched the <a href="https://github.com/mui-org/material-ui/issues">issues</a> of this repository and believe that this is not a duplicate.</li>
</ul>
<h2 dir="auto">Your Environment</h2>

<table role="table">
<thead>
<tr>
<th>Tech</th>
<th>Version</th>
</tr>
</thead>
<tbody>
<tr>
<td>Material-UI</td>
<td>latest beta</td>
</tr>
</tbody>
</table>
<ul class="contains-task-list">
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox" checked=""> I have searched the <a href="https://github.com/callemall/material-ui/issues">issues</a> of this repository and believe that this is not a duplicate.</li>
</ul>
<h2 dir="auto">Expected Behavior</h2>
<p dir="auto">I would have expected to be able to use <code class="notranslate">value={100}</code> inside a RadioGroup and FormControlLabel.<br>
The docs state, that value is a <code class="notranslate">string</code> <a href="https://material-ui-1dab0.firebaseapp.com/api/radio-group/" rel="nofollow">https://material-ui-1dab0.firebaseapp.com/api/radio-group/</a> <a href="https://material-ui-1dab0.firebaseapp.com/api/form-control-label/" rel="nofollow">https://material-ui-1dab0.firebaseapp.com/api/form-control-label/</a> , but I wonder if this is on purpose or accident.</p>
<h2 dir="auto">Current Behavior</h2>
<p dir="auto">It actually works just fine, but throws type errors in the console.</p>
<p dir="auto">If you also think that value should accept numbers, i'd be happy to create a pr.</p>
<p dir="auto">Best Regards,<br>
lukas</p>