<p dir="auto">If a text field is focused by the user when it is disabled via props, the input has its focused visual style retained (label and line under the text remain highlighted in primary color). I tried to work around the issue by calling .blur() on the underlying input element before setting disabled={true}, but it appears that calling .blur() on the input also does not cause the visual styling for TextField to be updated and the input looks like it is still focused. I am not sure if this is the same or a different issue.</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">I'd expect an input to blur when disabled is set to true if it is focused. Additionally, I'd expect the visual styling to not appear focused when the input is no longer focused.</p>
<h2 dir="auto">Current Behavior</h2>
<p dir="auto">Setting disabled=true or calling blur on a focused input does not update the visual styling while the input is focused.</p>
<h2 dir="auto">Steps to Reproduce (for bugs)</h2>
<p dir="auto"><a href="https://codesandbox.io/s/pp0jl9jzq" rel="nofollow">https://codesandbox.io/s/pp0jl9jzq</a></p>
<ol dir="auto">
<li>Type two characters in the first input to cause it to be disabled.</li>
<li>Click/type in the second input. Notice that both inputs are focused.</li>
</ol>
<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-beta.17</td>
</tr>
<tr>
<td>React</td>
<td>15.6.x</td>
</tr>
<tr>
<td>browser</td>
<td>Chrome</td>
</tr>
</tbody>
</table>
<p dir="auto">If I download an external component (say, something like <a href="https://github.com/glittershark/reactable">https://github.com/glittershark/reactable</a>) - how can I theme it or give it material styles?</p>
<p dir="auto">What if I create my own custom component, how can I pluck mui styles and apply them? (I read the CodeExample section of the docs, but I didn't really follow it. Where does CodeBlock come from? You pass it <code class="notranslate">styles.codeBlock</code> but afaict that's not even defined? There also seems to be a lot of duplication of original styles, which doesn't seem very DRY?)</p>
<p dir="auto">With CSS (well, SASS or Less), of course, this was no problem. But now we've got this theme object? I'm confused. Certainly there is a way, right? You wouldn't shut the door on the entire github/npm ecosystem of other react components?</p>