如何使用JSS设置Material-UI菜单Popover?

时间:2018-10-11 04:53:35

标签: reactjs material-ui jsx jss

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

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

要执行此操作-我在菜单弹出框上添加了相对样式,并且此样式应用于了弹出框纸-但将材料应用于弹出框的内联样式接管了它,但它不起作用。

该如何设置样式?

1 个答案:

答案 0 :(得分:0)

反正一年过去了。通过PaperProps以这种方式添加样式。

这里是link

const signalR = require("signalr"); //here i can't use @aspnet/signalr or @microsoft/signalr because those aren't compatible with SignalR that's on the 3rd party server. UGH Microsoft!

let connection = new signalR.HubConnectionBuilder().withUrl("https://myurl/signalr/hubName")
    .configureLogging("warn")
        .build();

    connection.start().then(() => {
        console.log("yeeey!");
    }).catch((e) => {
        console.log(e);
    });