<p dir="auto">I'm using MaterialUI w/ React 16 w/ server-side rendering. Everything seems to be working, but React is complaining about the server-side and client-side markups not matching. Warning goes away if I remove the <code class="notranslate">TextField</code> from my view. What am I doing wrong?</p>
<p dir="auto">React Warning: <code class="notranslate">Warning: Prop 'htmlFor' did not match. Server: "email-undefined-Email-51592" Client: "email-undefined-Email-58019"</code></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/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">Should be able to utilize MUI's <code class="notranslate">TextField</code> component w/ SSR w/o having React warn on SSR and CSR render mismatches.</p>
<h2 dir="auto">Current Behavior</h2>
<p dir="auto">The warning above is displayed in the browser console.</p>
<h2 dir="auto">Steps to Reproduce (for bugs)</h2>
<p dir="auto">This is a server-side render issue, so using something like codesandbox.com isn't an option since you can only do CSR in that case.</p>
<ol dir="auto">
<li>Create a SSR react app</li>
<li>Create a view w/ a <code class="notranslate">TextField</code> component in it like follows:</li>
</ol>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="&lt;TextField
              className=&quot;&quot;
              type=&quot;email&quot;
              fullWidth={true}
              name=&quot;email&quot;
              floatingLabelText=&quot;Email&quot;
            /&gt;"><pre class="notranslate"><code class="notranslate">&lt;TextField
              className=""
              type="email"
              fullWidth={true}
              name="email"
              floatingLabelText="Email"
            /&gt;
</code></pre></div>
<ol start="3" dir="auto">
<li>Load the view.</li>
<li>Check console to see React warning above.</li>
</ol>
<h2 dir="auto">Context</h2>
<p dir="auto">Just building an app using MUI and can't make the warning go away (which is also causing components to re-render in the client)</p>
<h2 dir="auto">Your Environment</h2>
<p dir="auto">Node 8, KoaJS v2, React 16, react-router v4, Chrome latest</p>
<table role="table">
<thead>
<tr>
<th>Tech</th>
<th>Version</th>
</tr>
</thead>
<tbody>
<tr>
<td>Material-UI</td>
<td>0.19.4</td>
</tr>
<tr>
<td>React</td>
<td>16</td>
</tr>
<tr>
<td>browser</td>
<td>Chrome latest</td>
</tr>
<tr>
<td>etc</td>
<td>OSX High Sierra</td>
</tr>
</tbody>
</table>
<ul dir="auto">
<li>[x ] 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">Expected Behavior</h2>

<p dir="auto">Whenever a FlatButton is clicked, the event handler should receive the event object of the button.</p>
<h2 dir="auto">Current Behavior</h2>

<p dir="auto">Instead it receives the event object of a child span.</p>
<h2 dir="auto">Steps to Reproduce (for bugs)</h2>

<ol dir="auto">
<li>Open: <a href="https://codesandbox.io/s/l9v5q2548z" rel="nofollow">https://codesandbox.io/s/l9v5q2548z</a></li>
<li>Open debugging console.</li>
<li>Click on the buttons &amp; see the event.target object, which is a child span of the FlatButton that is being created behind the scenes.</li>
</ol>
<h2 dir="auto">Context</h2>

<p dir="auto">I need to pass name property of the buttons to the event handlers and there perform different actions depending on the value of the name property.</p>
<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>0.20</td>
</tr>
<tr>
<td>React</td>
<td>16.2.0</td>
</tr>
<tr>
<td>browser</td>
<td>Chrome</td>
</tr>
<tr>
<td>etc</td>
<td></td>
</tr>
</tbody>
</table>