<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.<br>
May be it is related to this: <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="248541440" data-permission-text="Title is private" data-url="https://github.com/mui/material-ui/issues/7695" data-hovercard-type="issue" data-hovercard-url="/mui/material-ui/issues/7695/hovercard" href="https://github.com/mui/material-ui/issues/7695">#7695</a> . I believe is a different issue.</li>
</ul>
<h2 dir="auto">Expected Behavior</h2>
<p dir="auto">I would expect the components to appear or disappear based on a breakpoint change.</p>
<h2 dir="auto">Current Behavior</h2>
<p dir="auto">Check the gif</p>
<p dir="auto"><a target="_blank" rel="noopener noreferrer nofollow" href="https://camo.githubusercontent.com/01654f9949859efbf9a0f0aa100b6a9ab8ee9b98e76701b83d8106f7409fa8f7/687474703a2f2f7265636f726469742e636f2f4238626241345a5055382e676966"><img src="https://camo.githubusercontent.com/01654f9949859efbf9a0f0aa100b6a9ab8ee9b98e76701b83d8106f7409fa8f7/687474703a2f2f7265636f726469742e636f2f4238626241345a5055382e676966" alt="current behaviour" data-animated-image="" data-canonical-src="http://recordit.co/B8bbA4ZPU8.gif" style="max-width: 100%;"></a></p>
<p dir="auto">The elements appear, however they don't disappear, also the style is lost. See the <code class="notranslate">MenuIcon</code>.</p>
<h2 dir="auto">Steps to Reproduce (for bugs)</h2>
<p dir="auto">It is a Gatsby project: <a href="https://github.com/Zetoff/portfolio/tree/feature/responsive-navbar">https://github.com/Zetoff/portfolio/tree/feature/responsive-navbar</a><br>
or <a href="http://wiry-hour.surge.sh/test/" rel="nofollow">http://wiry-hour.surge.sh/test/</a></p>
<ol dir="auto">
<li>Clone repo</li>
<li>Install Gatsby if you don't have it.</li>
<li>Run Gatsby</li>
<li>Access localhost:8000/test</li>
<li>Change viewport size.</li>
</ol>
<h2 dir="auto">Context</h2>
<p dir="auto">I am trying to build a responsive AppBar</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.-beta8</td>
</tr>
<tr>
<td>React</td>
<td>15.6.1</td>
</tr>
<tr>
<td>browser</td>
<td>Chrome, Safari</td>
</tr>
<tr>
<td>etc</td>
<td>macOS-latest</td>
</tr>
</tbody>
</table>
<h3 dir="auto">Problem description</h3>
<p dir="auto">On the demo, change width and responsive change fails with</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="Uncaught TypeError: context[CHANNEL].unsubscribe is not a function
    at Object.unsubscribe (themeListener.js:27)
    at Style.componentWillUnmount (withStyles.js:116)
    at ReactCompositeComponent.js:408
    at measureLifeCyclePerf (ReactCompositeComponent.js:75)
    at ReactCompositeComponentWrapper.unmountComponent (ReactCompositeComponent.js:407)
    at Object.unmountComponent (ReactReconciler.js:78)
    at ReactCompositeComponentWrapper.unmountComponent (ReactCompositeComponent.js:417)
    at Object.unmountComponent (ReactReconciler.js:78)
    at Object.unmountChildren (ReactChildReconciler.js:146)
    at ReactDOMComponent.unmountChildren (ReactMultiChild.js:371)"><pre class="notranslate"><code class="notranslate">Uncaught TypeError: context[CHANNEL].unsubscribe is not a function
    at Object.unsubscribe (themeListener.js:27)
    at Style.componentWillUnmount (withStyles.js:116)
    at ReactCompositeComponent.js:408
    at measureLifeCyclePerf (ReactCompositeComponent.js:75)
    at ReactCompositeComponentWrapper.unmountComponent (ReactCompositeComponent.js:407)
    at Object.unmountComponent (ReactReconciler.js:78)
    at ReactCompositeComponentWrapper.unmountComponent (ReactCompositeComponent.js:417)
    at Object.unmountComponent (ReactReconciler.js:78)
    at Object.unmountChildren (ReactChildReconciler.js:146)
    at ReactDOMComponent.unmountChildren (ReactMultiChild.js:371)
</code></pre></div>
<h3 dir="auto">Link to minimal working code that reproduces the issue</h3>
<p dir="auto">demo</p>
<h3 dir="auto">Versions</h3>
<ul dir="auto">
<li>Material-UI: <a class="commit-link" data-hovercard-type="commit" data-hovercard-url="https://github.com/mui/material-ui/commit/72970c59204bc52f28c21808a1272cdb39bbf194/hovercard" href="https://github.com/mui/material-ui/commit/72970c59204bc52f28c21808a1272cdb39bbf194"><tt>72970c5</tt></a></li>
<li>React: 15.6.1</li>
<li>Browser: chrome and canary</li>
</ul>
<p dir="auto"><a target="_blank" rel="noopener noreferrer nofollow" href="https://user-images.githubusercontent.com/136564/29047215-4c5a88cc-7b90-11e7-8202-8214b16c2f6b.png"><img src="https://user-images.githubusercontent.com/136564/29047215-4c5a88cc-7b90-11e7-8202-8214b16c2f6b.png" alt="material-ui_and_loggers_js_-af-__projects_af-rubymine_2017_2_1_eap_and_material-ui v1-beta__5780_commits" style="max-width: 100%;"></a></p>