<p dir="auto"><a target="_blank" rel="noopener noreferrer nofollow" href="https://cloud.githubusercontent.com/assets/4075318/17741164/d26a4718-64a3-11e6-9e19-c06fafc65e5d.PNG"><img src="https://cloud.githubusercontent.com/assets/4075318/17741164/d26a4718-64a3-11e6-9e19-c06fafc65e5d.PNG" alt="password" style="max-width: 100%;"></a></p>
<p dir="auto">Browser: Chrome.<br>
After any interaction with page this effect disappears.<br>
Component's code:<br>
&lt;TextField<br>
errorStyle={{ top: '7px' }}<br>
floatingLabelStyle={{ fontSize: '14px', fontWeight: 300, color: '#dddede' }}<br>
floatingLabelFocusStyle={{ fontSize: 12, fontWeight: 300, transform: 'perspective(1px) scale(1) translate3d(0px, -28px, 0px)' }}<br>
floatingLabelText="Password"<br>
inputStyle={{ height: 28, marginTop: 36 }}<br>
style={{ width: '100%' }}<br>
type="password"<br>
errorText={error(password)}<br>
{...password}<br>
/&gt;</p>
<p dir="auto">It will be fine to have theme properties available when overriding component style.</p>
<p dir="auto"><strong>Example of usage:</strong></p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="const theme = createMuiTheme({
  overrides: {
    MuiButton: theme =&gt; ({
      root: { backgroundColor: theme.palette.secondary  }
    })
  }
})"><pre class="notranslate"><code class="notranslate">const theme = createMuiTheme({
  overrides: {
    MuiButton: theme =&gt; ({
      root: { backgroundColor: theme.palette.secondary  }
    })
  }
})
</code></pre></div>
<p dir="auto">May I create PR? Solution is to add</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="if (typeof overrides == 'function') overrides = overrides(theme)"><pre class="notranslate"><code class="notranslate">if (typeof overrides == 'function') overrides = overrides(theme)
</code></pre></div>
<p dir="auto">after line 14 in styles/getStylesCreator.js</p>