<p dir="auto">The Toolbar component not respecting custom theme settings.</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/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">The toolbar component should respect custom theme settings.</p>
<h2 dir="auto">Current Behavior</h2>
<p dir="auto">When overriding the toolbar style params in a custom theme they are not being applied.</p>
<h2 dir="auto">Steps to Reproduce (for bugs)</h2>
<ol dir="auto">
<li>Create a custom theme overriding the toolbar defaults (e.g.)</li>
</ol>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="createMuiTheme({
    palette: {
        type: 'light',
    },
    toolbar: {
        'backgroundColor': 'red',
        'minHeight': 60,
        '@media (min-width:0px) and (orientation: landscape)': {
            minHeight: 60
        },
        '@media (min-width:600px)': {
            minHeight: 60
        }
    }
});"><pre class="notranslate"><code class="notranslate">createMuiTheme({
    palette: {
        type: 'light',
    },
    toolbar: {
        'backgroundColor': 'red',
        'minHeight': 60,
        '@media (min-width:0px) and (orientation: landscape)': {
            minHeight: 60
        },
        '@media (min-width:600px)': {
            minHeight: 60
        }
    }
});
</code></pre></div>
<ol start="2" dir="auto">
<li>Inspect the toolbar after render. The background color isn't red and the minHeight remains at the default 64px.</li>
</ol>
<p dir="auto">Doing the same with a direct style override works fine (with the exception that min-width in the <a class="user-mention notranslate" data-hovercard-type="organization" data-hovercard-url="/orgs/media/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/media">@media</a> query must be specified as minWidth (e.g.)</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="const styles = {
    toolbar: {
        backgroundColor': 'red',
        'minHeight': 60,
        '@media (minWidth:0px) and (orientation: landscape)': {
            minHeight: 60
        },
        '@media (minWidth:600px)': {
            minHeight: 60
        }
    }
};"><pre class="notranslate"><code class="notranslate">const styles = {
    toolbar: {
        backgroundColor': 'red',
        'minHeight': 60,
        '@media (minWidth:0px) and (orientation: landscape)': {
            minHeight: 60
        },
        '@media (minWidth:600px)': {
            minHeight: 60
        }
    }
};
</code></pre></div>

...

<h2 dir="auto">Context</h2>
<p dir="auto">Unable to use theme as designed</p>
<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.12</td>
</tr>
<tr>
<td>React</td>
<td>16.0.0</td>
</tr>
<tr>
<td>browser</td>
<td>Chrome 61.0.3163.100</td>
</tr>
</tbody>
</table>
<h2 dir="auto">Problem Description</h2>
<p dir="auto">When browsing <a href="http://www.material-ui.com/" rel="nofollow">http://www.material-ui.com/</a> using tablet (e.g., Ipad), the website seems doesn't respond correctly.</p>
<p dir="auto">For instance, <a href="http://www.material-ui.com/#/components/auto-complete" rel="nofollow">this page</a> can not be opened. Also, touch events in components like left nav behave strangely.</p>
<h2 dir="auto">Versions</h2>

<ul dir="auto">
<li>Material-UI: 0.14.4</li>
<li>React: N/A</li>
<li>Browser: ipad chrome, ipad safari</li>
</ul>