<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 I click outside of menu, it must be dissmised.</p>
<h2 dir="auto">Current Behavior</h2>
<p dir="auto">After update from 1.0.0.beta 21 to 1.0.0 beta 31 menu is not being closed after clicking outside of menu. I have to choose something from menu to go on. Otherwise all the page is blocked.</p>
<h2 dir="auto">Steps to Reproduce (for bugs)</h2>
<ol dir="auto">
<li>Open the menu</li>
<li>Click outside of the menu</li>
</ol>
<h2 dir="auto">Context</h2>
<p dir="auto">Some code:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="state = {
    anchorLangMenu: null
};

selectLanguage = (langId) =&gt; {
    this.props.activateLanguage(langId);
    this.setState({ anchorLangMenu: null });
}

handleClick = event =&gt; {
    this.setState({ 
        anchorLangMenu: event.currentTarget
    });
};

render() {

.....
                    &lt;Button 
                        className=&quot;headerBtn&quot;          
                        aria-owns={this.state.anchorLangMenu ? 'languageMenu' : null}
                        aria-haspopup=&quot;true&quot;
                        onClick={this.handleClick}
                    &gt;
                        Languages
                    &lt;/Button&gt;
                    &lt;Menu
                        id=&quot;languageMenu&quot;
                        anchorEl={this.state.anchorLangMenu}
                        open={Boolean(this.state.anchorLangMenu)}
                        onRequestClose={() =&gt; this.setState({ anchorLangMenu: null })}
                    &gt;
                        &lt;MenuItem onClick={() =&gt; this.selectLanguage('en')} className=&quot;languageName&quot;&gt;
                            &lt;img 
                                src=&quot;/images/language-usa.svg&quot; 
                                className=&quot;languageFlag&quot; 
                                alt=&quot;English&quot; 
                            /&gt; 
                            English
                        &lt;/MenuItem&gt;
                        &lt;MenuItem onClick={() =&gt; this.selectLanguage('nb')} className=&quot;languageName&quot;&gt;
                            &lt;img 
                                src=&quot;/images/language-norway.svg&quot; 
                                className=&quot;languageFlag&quot; 
                                alt=&quot;Norsk&quot; 
                            /&gt;
                            Norsk
                        &lt;/MenuItem&gt;
                    &lt;/Menu&gt;
.....
}"><pre class="notranslate"><code class="notranslate">state = {
    anchorLangMenu: null
};

selectLanguage = (langId) =&gt; {
    this.props.activateLanguage(langId);
    this.setState({ anchorLangMenu: null });
}

handleClick = event =&gt; {
    this.setState({ 
        anchorLangMenu: event.currentTarget
    });
};

render() {

.....
                    &lt;Button 
                        className="headerBtn"          
                        aria-owns={this.state.anchorLangMenu ? 'languageMenu' : null}
                        aria-haspopup="true"
                        onClick={this.handleClick}
                    &gt;
                        Languages
                    &lt;/Button&gt;
                    &lt;Menu
                        id="languageMenu"
                        anchorEl={this.state.anchorLangMenu}
                        open={Boolean(this.state.anchorLangMenu)}
                        onRequestClose={() =&gt; this.setState({ anchorLangMenu: null })}
                    &gt;
                        &lt;MenuItem onClick={() =&gt; this.selectLanguage('en')} className="languageName"&gt;
                            &lt;img 
                                src="/images/language-usa.svg" 
                                className="languageFlag" 
                                alt="English" 
                            /&gt; 
                            English
                        &lt;/MenuItem&gt;
                        &lt;MenuItem onClick={() =&gt; this.selectLanguage('nb')} className="languageName"&gt;
                            &lt;img 
                                src="/images/language-norway.svg" 
                                className="languageFlag" 
                                alt="Norsk" 
                            /&gt;
                            Norsk
                        &lt;/MenuItem&gt;
                    &lt;/Menu&gt;
.....
}
</code></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>v1.0.0-beta.31</td>
</tr>
<tr>
<td>React</td>
<td>16.2.0</td>
</tr>
<tr>
<td>browser</td>
<td>Chrome, Safari</td>
</tr>
<tr>
<td>etc</td>
<td></td>
</tr>
</tbody>
</table>
<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>
<p dir="auto">The documentation around styled-components integration could be improved. The main scenario I think is not documented well is the case where the root component is not the one that the user wants to style. The use case I ran into is attempting to style <code class="notranslate">Drawer</code> with styled-components, expecting that my styles would apply to <code class="notranslate">paper</code>. However, since <code class="notranslate">paper</code> is not the root component, my overrides did nothing, even using the specificity trick with <code class="notranslate">&amp;&amp;</code>. The CSS declaration order did not matter.</p>
<p dir="auto">I had to use the trick I described in this comment @ the styled-components site: <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="266776273" data-permission-text="Title is private" data-url="https://github.com/styled-components/styled-components/issues/1253" data-hovercard-type="issue" data-hovercard-url="/styled-components/styled-components/issues/1253/hovercard?comment_id=364837880&amp;comment_type=issue_comment" href="https://github.com/styled-components/styled-components/issues/1253#issuecomment-364837880">styled-components/styled-components#1253 (comment)</a>, which boils down to something like this:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="const StyledDrawer = styled(({ drawerWidth, ...rest }) =&gt; &lt;Drawer {...rest} classes={{paper: 'paper-override'}} /&gt;)`
  &amp; .paper-override {
    position: relative;
    height: 100%;
    overflow: hidden;
  }
  width: ${props =&gt; props.drawerWidth}px;
`"><pre class="notranslate"><code class="notranslate">const StyledDrawer = styled(({ drawerWidth, ...rest }) =&gt; &lt;Drawer {...rest} classes={{paper: 'paper-override'}} /&gt;)`
  &amp; .paper-override {
    position: relative;
    height: 100%;
    overflow: hidden;
  }
  width: ${props =&gt; props.drawerWidth}px;
`
</code></pre></div>
<p dir="auto">which demonstrates how to make the override on the non-root component.</p>
<p dir="auto">To make the example complete, we could add <code class="notranslate">withStyles</code> to get access to the material-ui theme:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="const StyledDrawer = withStyles()(styled(({ theme, drawerWidth, ...rest }) =&gt; &lt;Drawer {...rest} classes={{paper: 'paper-override'}} /&gt;)`
  &amp; .paper-override {
    position: relative;
    height: 100%;
    overflow: hidden;
  }
  width: ${props =&gt; props.theme.something}px;
`)"><pre class="notranslate"><code class="notranslate">const StyledDrawer = withStyles()(styled(({ theme, drawerWidth, ...rest }) =&gt; &lt;Drawer {...rest} classes={{paper: 'paper-override'}} /&gt;)`
  &amp; .paper-override {
    position: relative;
    height: 100%;
    overflow: hidden;
  }
  width: ${props =&gt; props.theme.something}px;
`)
</code></pre></div>
<p dir="auto">This level of explanation is definitely not available in the docs right now, and it took me quite a lot of research and time to figure it out.</p>
<p dir="auto">PS All of the above assumes material-ui-next. I have no idea about the current stable version.</p>
<p dir="auto">cc: <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/oliviertassinari/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/oliviertassinari">@oliviertassinari</a></p>