<p dir="auto"><a target="_blank" rel="noopener noreferrer nofollow" href="https://user-images.githubusercontent.com/28860670/35555153-f9bf4c82-05a6-11e8-8a64-b32e1ba14643.png"><img src="https://user-images.githubusercontent.com/28860670/35555153-f9bf4c82-05a6-11e8-8a64-b32e1ba14643.png" alt="staticshot_30-01-2018_10-15-12" style="max-width: 100%;"></a></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/mui-org/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">Exact highlight underline alignment all the time (even after heat death of the universe).</p>
<h2 dir="auto">Current Behavior</h2>
<p dir="auto">(In my app) after page reload the line goes under the second tab. It fixes itself on second render or on window resize.</p>
<h2 dir="auto">Steps to Reproduce (for bugs)</h2>
<p dir="auto">I don't have a small project to reproduce this. I made only this video <a href="https://streamable.com/swsom" rel="nofollow">https://streamable.com/swsom</a><br>
If you have no idea why it happens just close this issue (I will try to fix it later).</p>
<div class="highlight highlight-text-html-basic notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="&lt;Tabs
    indicatorColor=&quot;primary&quot;
    textColor=&quot;primary&quot;
    value={this.props.activeTab}
    onChange={this.onTabsChange}
    fullWidth
&gt;
    &lt;Tab label=&quot;Sign In&quot; value=&quot;login&quot; /&gt;
    &lt;Tab label=&quot;Sign Up&quot; value=&quot;register&quot; /&gt;
&lt;/Tabs&gt;"><pre class="notranslate"><span class="pl-kos">&lt;</span><span class="pl-ent">Tabs</span>
    <span class="pl-c1">indicatorColor</span>="<span class="pl-s">primary</span>"
    <span class="pl-c1">textColor</span>="<span class="pl-s">primary</span>"
    <span class="pl-c1">value</span>=<span class="pl-s">{this.props.activeTab}</span>
    <span class="pl-c1">onChange</span>=<span class="pl-s">{this.onTabsChange}</span>
    <span class="pl-c1">fullWidth</span>
<span class="pl-kos">&gt;</span>
    <span class="pl-kos">&lt;</span><span class="pl-ent">Tab</span> <span class="pl-c1">label</span>="<span class="pl-s">Sign In</span>" <span class="pl-c1">value</span>="<span class="pl-s">login</span>" /&gt;
    <span class="pl-kos">&lt;</span><span class="pl-ent">Tab</span> <span class="pl-c1">label</span>="<span class="pl-s">Sign Up</span>" <span class="pl-c1">value</span>="<span class="pl-s">register</span>" /&gt;
<span class="pl-kos">&lt;/</span><span class="pl-ent">Tabs</span><span class="pl-kos">&gt;</span></pre></div>
<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.31</td>
</tr>
<tr>
<td>React</td>
<td>16.2.0</td>
</tr>
<tr>
<td>browser</td>
<td>Chromium 63.0.3239.132</td>
</tr>
</tbody>
</table>
<ul dir="auto">
<li>[ x] 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">Pass a class with styles to component and change label color</p>
<h2 dir="auto">Current Behavior</h2>
<p dir="auto">in any possible way based from material-ui docs in 0.15 and 1.0 version it is impossible to change/override a color of label</p>
<h2 dir="auto">Steps to Reproduce (for bugs)</h2>
<ol dir="auto">
<li>create and style constant and use withStyle HOC</li>
</ol>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="const styles = theme =&gt; ({
    button2: {
        color: '#ec5c5d',
        fontSize:&quot;15px&quot;,
        '&amp;:hover': {
          color: '#ec5c5d',
        },
        label: {
            color: '#ec5c5d',
        },
        InputLabel: {
            root: {
                color: '#ec5c5d',
            }
        },
        MuiInputLabel: {
            root: {
                color: '#ec5c5d',
            }
        }
    }
})"><pre class="notranslate"><span class="pl-k">const</span> <span class="pl-en">styles</span> <span class="pl-c1">=</span> <span class="pl-s1">theme</span> <span class="pl-c1">=&gt;</span> <span class="pl-kos">(</span><span class="pl-kos">{</span>
    <span class="pl-c1">button2</span>: <span class="pl-kos">{</span>
        <span class="pl-c1">color</span>: <span class="pl-s">'#ec5c5d'</span><span class="pl-kos">,</span>
        <span class="pl-c1">fontSize</span>:<span class="pl-s">"15px"</span><span class="pl-kos">,</span>
        <span class="pl-s">'&amp;:hover'</span>: <span class="pl-kos">{</span>
          <span class="pl-c1">color</span>: <span class="pl-s">'#ec5c5d'</span><span class="pl-kos">,</span>
        <span class="pl-kos">}</span><span class="pl-kos">,</span>
        <span class="pl-c1">label</span>: <span class="pl-kos">{</span>
            <span class="pl-c1">color</span>: <span class="pl-s">'#ec5c5d'</span><span class="pl-kos">,</span>
        <span class="pl-kos">}</span><span class="pl-kos">,</span>
        <span class="pl-c1">InputLabel</span>: <span class="pl-kos">{</span>
            <span class="pl-c1">root</span>: <span class="pl-kos">{</span>
                <span class="pl-c1">color</span>: <span class="pl-s">'#ec5c5d'</span><span class="pl-kos">,</span>
            <span class="pl-kos">}</span>
        <span class="pl-kos">}</span><span class="pl-kos">,</span>
        <span class="pl-c1">MuiInputLabel</span>: <span class="pl-kos">{</span>
            <span class="pl-c1">root</span>: <span class="pl-kos">{</span>
                <span class="pl-c1">color</span>: <span class="pl-s">'#ec5c5d'</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-kos">)</span></pre></div>
<ol start="2" dir="auto">
<li><code class="notranslate">&lt;TextField id="breeders-races-filter-search" label="Search race" fullWidth margin="normal" className={this.props.classes.button2} /&gt;</code></li>
<li>text-size works, colors do not !</li>
</ol>
<h2 dir="auto">Context</h2>
<p dir="auto">Impossible to use it in system, we are close to remove whole lib and rewrite over 20k of lines.</p>
<h2 dir="auto">Your Environment</h2>
<p dir="auto">Mac os x<br>
next.js</p>
<table role="table">
<thead>
<tr>
<th>Tech</th>
<th>Version</th>
</tr>
</thead>
<tbody>
<tr>
<td>Material-UI</td>
<td>1.00</td>
</tr>
<tr>
<td>React</td>
<td>16</td>
</tr>
<tr>
<td>browser</td>
<td>chrome current</td>
</tr>
</tbody>
</table>