CODEWITHSUNDEEP
reactjsmaterial-uijsxjss
dwjohnston
dwjohnston

Reputation: 11890

How do I style the Material-UI Menu Popover with JSS?

I have a Code Sandbox here: https://codesandbox.io/s/0qv1jwlmlv

What I'm doing is pretty straight forward: 

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);

Here, my navbar is of a fixed height, and when you press the menu button, I want the menu button to open below the nav bar.

To do this - I've added relative styling to the menu popover, and this style is applied to the popover paper - but the inline style that material applies to the popover takes over and it doesn't work.

How am I meant to style this?

Upvotes: 2

Views: 14256

Answers (2)

Roy33
Roy33

Reputation: 3

PaperProps has been depreciated. The new way of doing it as of 2024 is through slotProps. https://mui.com/material-ui/api/menu/

slotProps={{
    paper: {
          style: {
                width: "180px",
                marginTop: "2px",
                backgroundColor: "green",
            },
     },
}}

This will apply the provided css to the underlying paper component.

Upvotes: 0

Davit Mkrtchyan
Davit Mkrtchyan

Reputation: 469

A year has passed, anyway. Add styles with PaperProps in this way.

Here is link

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

Upvotes: 14

Related Questions