如何使用 JSS 设置 Material-UI 菜单弹出框的样式？

Question

我这里有一个代码沙箱：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);

在这里，我的导航栏高度固定，当您按下菜单按钮时，我希望菜单按钮在导航栏下方打开。

为此 - 我已将相对样式添加到菜单弹出框，并将此样式应用于弹出框纸 - 但材料应用于弹出框的内联样式接管并且不起作用。

我打算如何设计这个？

Answer 1

一年过去了，无论如何。以这种方式使用 PaperProps 添加样式。

这是链接

PaperProps={{
 style: {
  marginTop: "40px"
 }
}}