Issue 1:
I have searched the issues of this repository and believe that this is not a duplicate.

Expected Behavior

When I click outside of menu, it must be dissmised.

Current Behavior

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.

Steps to Reproduce (for bugs)

Open the menu

Click outside of the menu

Context

Some code:

state = {
anchorLangMenu: null
};

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

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

render() {

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

Your Environment

Tech
Version

Material-UI
v1.0.0-beta.31

React
16.2.0

browser
Chrome, Safari

etc

Issue 2:
I have searched the issues of this repository and believe that this is not a duplicate.

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 Drawer with styled-components, expecting that my styles would apply to paper. However, since paper is not the root component, my overrides did nothing, even using the specificity trick with &&. The CSS declaration order did not matter.

I had to use the trick I described in this comment @ the styled-components site: styled-components/styled-components#1253 (comment), which boils down to something like this:

const StyledDrawer = styled(({ drawerWidth, ...rest }) => <Drawer {...rest} classes={{paper: 'paper-override'}} />)`
& .paper-override {
position: relative;
height: 100%;
overflow: hidden;
}
width: ${props => props.drawerWidth}px;
`

which demonstrates how to make the override on the non-root component.

To make the example complete, we could add withStyles to get access to the material-ui theme:

const StyledDrawer = withStyles()(styled(({ theme, drawerWidth, ...rest }) => <Drawer {...rest} classes={{paper: 'paper-override'}} />)`
& .paper-override {
position: relative;
height: 100%;
overflow: hidden;
}
width: ${props => props.theme.something}px;
`)

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.

PS All of the above assumes material-ui-next. I have no idea about the current stable version.

cc: @oliviertassinari