<p dir="auto">Hello,</p>
<h2 dir="auto">Expected behaviour</h2>
<p dir="auto">The TextField's label clashes with the underlying  tag's pre-populated content when using type=[datetime-local|time|date|etc]. I would expect the pre-populated content to be hidden when the TextField does not have focus and appear only when it does have focus and the label's position is changed.</p>
<h2 dir="auto">Current behaviour</h2>
<p dir="auto">Code:</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="&lt;TextField
  required
  margin=&quot;dense&quot;
  id=&quot;timestamp&quot;
  label=&quot;Timestamp&quot;
  type=&quot;datetime-local&quot;
  fullWidth
/&gt;"><pre class="notranslate"><span class="pl-c1">&lt;</span><span class="pl-ent">TextField</span>
  <span class="pl-c1">required</span>
  <span class="pl-c1">margin</span><span class="pl-c1">=</span><span class="pl-s">"dense"</span>
  <span class="pl-c1">id</span><span class="pl-c1">=</span><span class="pl-s">"timestamp"</span>
  <span class="pl-c1">label</span><span class="pl-c1">=</span><span class="pl-s">"Timestamp"</span>
  <span class="pl-c1">type</span><span class="pl-c1">=</span><span class="pl-s">"datetime-local"</span>
  <span class="pl-c1">fullWidth</span>
<span class="pl-c1">/</span><span class="pl-c1">&gt;</span></pre></div>
<p dir="auto">Example:<br>
<a target="_blank" rel="noopener noreferrer nofollow" href="https://user-images.githubusercontent.com/1335525/33118334-cafdd970-cf6b-11e7-8c4e-5a7f5eb8e5b9.png"><img width="619" alt="screen shot 2017-11-22 at 09 58 45" src="https://user-images.githubusercontent.com/1335525/33118334-cafdd970-cf6b-11e7-8c4e-5a7f5eb8e5b9.png" style="max-width: 100%;"></a></p>
<p dir="auto">The label stops classing when the field is completed.</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>1.0.0 beta21</td>
</tr>
<tr>
<td>React</td>
<td>16.1.1</td>
</tr>
<tr>
<td>browser</td>
<td>Version 62.0.3202.94 (Official Build) (64-bit)</td>
</tr>
<tr>
<td>os</td>
<td>MacOS 10.13</td>
</tr>
</tbody>
</table>
<p dir="auto">Thanks for the fantastic UI framework!</p>
<h3 dir="auto">Problem description</h3>
<p dir="auto">As I said in some issue, the production generated classNames from Material is colliding with my global styles so I need to pass a custom createGenerateClassName like <a href="https://github.com/callemall/material-ui/blob/110f0a6e95e8e2b51b2bdd7e545a9b41d1a0009f/docs/src/components/App.js#L50">here</a></p>
<p dir="auto">Now I need to pass the jss context with JSSProvider component <a href="https://github.com/callemall/material-ui/blob/1f3e67326d76f5d2053b128d5ca2cdefa0d6d90f/examples/nextjs/components/withRoot.js#L52">here</a></p>
<p dir="auto">But then, <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="247239194" data-permission-text="Title is private" data-url="https://github.com/mui/material-ui/issues/7627" data-hovercard-type="issue" data-hovercard-url="/mui/material-ui/issues/7627/hovercard" href="https://github.com/mui/material-ui/issues/7627">#7627</a> happens again. Material UI starts to generate duplicated classNames.</p>
<p dir="auto">So my question is, is there anyway to pass JSS context safely on browser render code ? I want to stop forking Material UI for that 1 character change</p>
<h3 dir="auto">Link to minimal working code that reproduces the issue</h3>

<h3 dir="auto">Versions</h3>
<ul dir="auto">
<li>Material-UI: 1.0.0-beta-4</li>
<li>React: ^15.0.0</li>
<li>Browser: not relevant</li>
</ul>