Material Design Lite - Bottom Line in text field has a slight gap with colored line
<p>I am trying to get Material Design Lite text field to work and I have an issue where the bottom colored line has a slight 3-4 px gap between the gray starting line. Any MDL text Field example I plug into my page I get the same result, what can locally be triggering the issue? Also I am using react.js on the frontend.</p>

<p>I am on 1.2.1 of material design lite.</p>

<p>Here is an image:
<a href="https://i.stack.imgur.com/BPdfO.png" rel="noreferrer"><img src="https://i.stack.imgur.com/BPdfO.png" alt="enter image description here"></a></p>

<p>Here is my code:</p>

<pre><code>&lt;div className="mdl-textfield mdl-js-textfield mdl-textfield--floating-label"&gt;
    &lt;input className="mdl-textfield__input" type="text"/&gt;
        &lt;label className="mdl-textfield__label" htmlFor="nameField"&gt;
            Your name
        &lt;/label&gt;
&lt;/div&gt;
</code></pre>