У меня есть песочница кода: https://codesandbox.io/s/0qv1jwlmlv
То, что я делаю, довольно прямолинейно:
class SimpleMenu extends React.Component {
state = {
anchorEl: null
};
handleClick = event => {
this.setState({ anchorEl: event.currentTarget });
};
handleClose = () => {
this.setState({ anchorEl: null });
};
render() {
const { anchorEl } = this.state;
const { classes } = this.props;
return (
<AppBar className={classes.root}>
<Toolbar>
<Button
variant="contained"
color="secondary"
aria-owns={anchorEl ? "simple-menu" : null}
aria-haspopup="true"
onClick={this.handleClick}
>
Open Menu
</Button>
<Menu
id="simple-menu"
anchorEl={anchorEl}
open={Boolean(anchorEl)}
onClose={this.handleClose}
PopoverClasses={{
paper: classes.menu
}}
>
<MenuItem onClick={this.handleClose}>Profile</MenuItem>
<MenuItem onClick={this.handleClose}>My account</MenuItem>
<MenuItem onClick={this.handleClose}>Logout</MenuItem>
</Menu>
</Toolbar>
</AppBar>
);
}
}
const styles = {
root: {
height: 100
},
menu: {
position: "relative",
top: 100
}
};
export default withStyles(styles)(SimpleMenu);
Здесь моя панель навигации имеет фиксированную высоту, и когда вы нажимаете кнопку меню, я хочу, чтобы кнопка меню открывалась под панелью навигации.
Для этого - я добавил относительный стиль к всплывающему окну меню, и этот стиль применяется к бумаге всплывающего окна - но встроенный стиль, который материал применяется к всплывающему окну, берет верх, и он не работает.
Как я должен это стилизовать?
Grow
. Я продолжу публиковать ответ сейчас. - person dwjohnston   schedule 11.10.2018