<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">Visiting material-ui.com on the stock/default android browser running android 5.0.2 the drawer shouldn't be stuck open.</p>
<h2 dir="auto">Current Behavior</h2>

<p dir="auto">The drawer is stuck open. The rest of the page is clickable/scrollable and there's no overlay, but the drawer displays over the page.</p>
<h2 dir="auto">Steps to Reproduce (for bugs)</h2>
<ol dir="auto">
<li>Navigate to material-ui.com on the stock/default browser of an android phone OS &lt;= ~5</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>0.19.4</td>
</tr>
<tr>
<td>browser</td>
<td>Android 5.0.2 Stock/Default</td>
</tr>
</tbody>
</table>
<p dir="auto">Hi!<br>
I am trying to override styles for BottomNavigationButton. Specifically the label. This is my code.</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="const styles = {
    selected: {
        color: &quot;#353535&quot;
    },
    label: {
        color: &quot;#e2e2e2&quot;,
    },
};

class CustomBottomNavButton extends React.Component {

    static propTypes = {
        classes: PropTypes.object.isRequired,
    };

    render() {
        console.log(Theme.typography.caption);
        const props = this.props;

        return &lt;BottomNavigationButton {...props}
            classes={{selected: props.classes.selected, label: props.classes.label, icon: props.classes.icon}}
            icon={props.icon}
            label={props.label}&gt;
        &lt;/BottomNavigationButton&gt;;
    }
}

export default withStyles(styles)(CustomBottomNavButton);"><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">selected</span>: <span class="pl-kos">{</span>
        <span class="pl-c1">color</span>: <span class="pl-s">"#353535"</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">"#e2e2e2"</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-k">class</span> <span class="pl-v">CustomBottomNavButton</span> <span class="pl-k">extends</span> <span class="pl-v">React</span><span class="pl-kos">.</span><span class="pl-c1">Component</span> <span class="pl-kos">{</span>

    <span class="pl-k">static</span> <span class="pl-c1">propTypes</span> <span class="pl-c1">=</span> <span class="pl-kos">{</span>
        <span class="pl-c1">classes</span>: <span class="pl-v">PropTypes</span><span class="pl-kos">.</span><span class="pl-c1">object</span><span class="pl-kos">.</span><span class="pl-c1">isRequired</span><span class="pl-kos">,</span>
    <span class="pl-kos">}</span><span class="pl-kos">;</span>

    <span class="pl-en">render</span><span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
        <span class="pl-smi">console</span><span class="pl-kos">.</span><span class="pl-en">log</span><span class="pl-kos">(</span><span class="pl-v">Theme</span><span class="pl-kos">.</span><span class="pl-c1">typography</span><span class="pl-kos">.</span><span class="pl-c1">caption</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
        <span class="pl-k">const</span> <span class="pl-s1">props</span> <span class="pl-c1">=</span> <span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">props</span><span class="pl-kos">;</span>

        <span class="pl-k">return</span> <span class="pl-c1">&lt;</span><span class="pl-ent">BottomNavigationButton</span> <span class="pl-kos">{</span>...<span class="pl-s1">props</span><span class="pl-kos">}</span>
            <span class="pl-c1">classes</span><span class="pl-c1">=</span><span class="pl-kos">{</span><span class="pl-kos">{</span><span class="pl-c1">selected</span>: <span class="pl-s1">props</span><span class="pl-kos">.</span><span class="pl-c1">classes</span><span class="pl-kos">.</span><span class="pl-c1">selected</span><span class="pl-kos">,</span> <span class="pl-c1">label</span>: <span class="pl-s1">props</span><span class="pl-kos">.</span><span class="pl-c1">classes</span><span class="pl-kos">.</span><span class="pl-c1">label</span><span class="pl-kos">,</span> <span class="pl-c1">icon</span>: <span class="pl-s1">props</span><span class="pl-kos">.</span><span class="pl-c1">classes</span><span class="pl-kos">.</span><span class="pl-c1">icon</span><span class="pl-kos">}</span><span class="pl-kos">}</span>
            <span class="pl-c1">icon</span><span class="pl-c1">=</span><span class="pl-kos">{</span><span class="pl-s1">props</span><span class="pl-kos">.</span><span class="pl-c1">icon</span><span class="pl-kos">}</span>
            <span class="pl-c1">label</span><span class="pl-c1">=</span><span class="pl-kos">{</span><span class="pl-s1">props</span><span class="pl-kos">.</span><span class="pl-c1">label</span><span class="pl-kos">}</span><span class="pl-c1">&gt;</span>
        <span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">BottomNavigationButton</span><span class="pl-c1">&gt;</span><span class="pl-kos">;</span>
    <span class="pl-kos">}</span>
<span class="pl-kos">}</span>

<span class="pl-k">export</span> <span class="pl-k">default</span> <span class="pl-en">withStyles</span><span class="pl-kos">(</span><span class="pl-s1">styles</span><span class="pl-kos">)</span><span class="pl-kos">(</span><span class="pl-v">CustomBottomNavButton</span><span class="pl-kos">)</span><span class="pl-kos">;</span></pre></div>

<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">When Button is selected, it should have "selected" style, and when is not selected should have "label" style.</p>
<h2 dir="auto">Current Behavior</h2>

<p dir="auto">When Button is selected it should have "selected" style but it remains with "label". If I remove the color in label, then applies "selected". So, looks like selection it's not overriding the styles.</p>
<p dir="auto">Same happen for any icon included. If "stroke" was defined before (in any part, svg itself, via another css..) selected styling won't work.</p>
<h2 dir="auto">Steps to Reproduce (for bugs)</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.23</td>
</tr>
<tr>
<td>React</td>
<td>^16.2.0</td>
</tr>
<tr>
<td>browser</td>
<td>Mozilla, Chrome</td>
</tr>
</tbody>
</table>