<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>
<h3 dir="auto"><code class="notranslate">borderColor</code> does not work!</h3>
<p dir="auto">I copied the code from <a href="http://www.material-ui.com/#/components/text-field" rel="nofollow">http://www.material-ui.com/#/components/text-field</a>.</p>
<p dir="auto"><em>Styled examples</em></p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="const styles = {
  errorStyle: {
    color: orange500,
  },
  underlineStyle: {
    borderColor: orange500,
  },
  floatingLabelStyle: {
    color: orange500,
  },
  floatingLabelFocusStyle: {
    color: blue500,
  },
};
// .......
&lt;TextField
     hintText=&quot;Custom Underline Focus Color&quot;
     underlineFocusStyle={styles.underlineStyle}
/&gt;"><pre class="notranslate"><span class="pl-k">const</span> <span class="pl-s1">styles</span> <span class="pl-c1">=</span> <span class="pl-kos">{</span>
  <span class="pl-c1">errorStyle</span>: <span class="pl-kos">{</span>
    <span class="pl-c1">color</span>: <span class="pl-s1">orange500</span><span class="pl-kos">,</span>
  <span class="pl-kos">}</span><span class="pl-kos">,</span>
  <span class="pl-c1">underlineStyle</span>: <span class="pl-kos">{</span>
    <span class="pl-c1">borderColor</span>: <span class="pl-s1">orange500</span><span class="pl-kos">,</span>
  <span class="pl-kos">}</span><span class="pl-kos">,</span>
  <span class="pl-c1">floatingLabelStyle</span>: <span class="pl-kos">{</span>
    <span class="pl-c1">color</span>: <span class="pl-s1">orange500</span><span class="pl-kos">,</span>
  <span class="pl-kos">}</span><span class="pl-kos">,</span>
  <span class="pl-c1">floatingLabelFocusStyle</span>: <span class="pl-kos">{</span>
    <span class="pl-c1">color</span>: <span class="pl-s1">blue500</span><span class="pl-kos">,</span>
  <span class="pl-kos">}</span><span class="pl-kos">,</span>
<span class="pl-kos">}</span><span class="pl-kos">;</span>
<span class="pl-c">// .......</span>
<span class="pl-c1">&lt;</span><span class="pl-ent">TextField</span>
     <span class="pl-c1">hintText</span><span class="pl-c1">=</span><span class="pl-s">"Custom Underline Focus Color"</span>
     <span class="pl-c1">underlineFocusStyle</span><span class="pl-c1">=</span><span class="pl-kos">{</span><span class="pl-s1">styles</span><span class="pl-kos">.</span><span class="pl-c1">underlineStyle</span><span class="pl-kos">}</span>
<span class="pl-c1">/</span><span class="pl-c1">&gt;</span></pre></div>
<p dir="auto">It doesn't work, the <code class="notranslate">border-corlor</code> keeps in default.</p>
<h3 dir="auto"><code class="notranslate">borderBottomColor</code> works well.</h3>
<p dir="auto">I tried to set <code class="notranslate">borderBottomColor</code>, and it works.</p>
<h3 dir="auto">I don't know if it was a bug.</h3>
<p dir="auto"><a target="_blank" rel="noopener noreferrer nofollow" href="https://cloud.githubusercontent.com/assets/9475864/20791389/c41396e0-b7f7-11e6-84b2-8397efd5bf30.png"><img src="https://cloud.githubusercontent.com/assets/9475864/20791389/c41396e0-b7f7-11e6-84b2-8397efd5bf30.png" alt="image" style="max-width: 100%;"></a><br>
Chrome<br>
create-react-app</p>