<ul dir="auto">
<li>Material-UI: material-ui@0.16.4</li>
<li>React: react@15.4.1</li>
<li>Browser: chrome@54.0.2840.100</li>
</ul>
<p dir="auto">The focus <code class="notranslate">&lt;hr&gt;</code> is rendered with the following styles:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="border-bottom: 2px solid;
    border-bottom-width: 2px;
    border-bottom-style: solid;
    border-bottom-color: initial;"><pre class="notranslate"><code class="notranslate">border-bottom: 2px solid;
    border-bottom-width: 2px;
    border-bottom-style: solid;
    border-bottom-color: initial;
</code></pre></div>
<p dir="auto">The result is a black focus underline</p>
<h3 dir="auto">Problem description</h3>
<p dir="auto">It's a weird issue. The border of a TextField has the color black (see Screenshot):</p>
<p dir="auto"><a target="_blank" rel="noopener noreferrer nofollow" href="https://cloud.githubusercontent.com/assets/2188790/20939277/7f42c96e-bbee-11e6-877b-7ffcd8ed283d.png"><img width="602" alt="bildschirmfoto 2016-12-06 um 19 26 21" src="https://cloud.githubusercontent.com/assets/2188790/20939277/7f42c96e-bbee-11e6-877b-7ffcd8ed283d.png" style="max-width: 100%;"></a></p>
<p dir="auto">Checking the CSS in the developer console:</p>
<p dir="auto"><a target="_blank" rel="noopener noreferrer nofollow" href="https://cloud.githubusercontent.com/assets/2188790/20939294/924283ce-bbee-11e6-8a6a-23427279ffd4.png"><img width="283" alt="bildschirmfoto 2016-12-06 um 19 26 37" src="https://cloud.githubusercontent.com/assets/2188790/20939294/924283ce-bbee-11e6-8a6a-23427279ffd4.png" style="max-width: 100%;"></a></p>
<p dir="auto">So obviously there is no color set on the border.</p>
<p dir="auto">This happens in Chrome, but in Firefox it works. But it get even more weird: When I build my app with the flag <code class="notranslate">NODE_ENV=production</code> then it DOES work properly.</p>
<p dir="auto">Also changing these two lines of code here: <a href="https://github.com/callemall/material-ui/blob/master/src/TextField/TextFieldUnderline.js#L94-L95">https://github.com/callemall/material-ui/blob/master/src/TextField/TextFieldUnderline.js#L94-L95</a></p>
<p dir="auto">… to <code class="notranslate">borderBottom: 'solid 2px ' + focusColor,</code> work as well, even with a normal build.</p>
<p dir="auto">I wanted to create a Webpackbin example, but there it works fine.</p>
<p dir="auto">I'm using Meteor, don't know if that matters. But maybe someone find a solution.</p>
<h3 dir="auto">Versions</h3>
<ul dir="auto">
<li>Material-UI: 0.16.4</li>
<li>React: 15.4.1</li>
<li>Browser: Chrome 54</li>
</ul>